資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中將數字格式化為美元貨幣字串？
本教程將教你如何使用 JavaScript 將數字格式化為美元貨幣字串。現在，問題出現了，為什麼我們需要將數字格式化為美元貨幣字串？答案就在這裡。使用者可以設想一下，他們正在開發一個電子商務網站或應用程式，並且必須向客戶顯示產品價格的場景。如果他們將產品價格渲染為 2500 和 $2500 會怎麼樣？第二個看起來更好，因為 ‘$’ 代表 USD 貨幣，並且是顯示 USD 貨幣的標準化方式。此外，第二種方法更容易理解。
下面，我們提供瞭解決上述問題並將數字顯示為 USD 貨幣字串的不同方法。
- 使用字串連線
- 使用 Intl.NumberFormat() 方法
- 使用 toLocaleString() 方法
使用字串連線
在這種方法中，我們將簡單地使用 JavaScript 中的 ‘+’ 號進行字串連線。這是將數字表示為美元貨幣字串的最簡單方法。
語法
let price = 1642; var currencyUSD = ‘$’ + price;
示例 1
下面的示例演示了使用者如何使用 JavaScript 中的字串連線在數字前面新增 ‘$’ 符號。
<!DOCTYPE html>
<html>
<body>
<h2>Format Numbers as a dollar currency string</h2>
<p> Formatting 1642 as US dollars (US$):</p>
<p id="result"> </p>
<script type="text/javascript">
// function to format number with $ sign.
function formatNumberWithDollar() {
let price = 1642;
let formattedPrice = '$' + price;
var result = document.getElementById("result");
result.innerHTML = formattedPrice ;
}
formatNumberWithDollar();
</script>
</body>
</html>在上面的輸出中，使用者可以看到我們的價格是如何使用美元貨幣符號字串進行格式化的。
使用 Intl.NumberFormat() 方法
在 JavaScript 中，將數字格式化為貨幣字串的最佳方法之一是使用 Intl.NumberFormat() 方法。您可以將 區域設定 作為引數傳遞給該方法，並在數字前面設定美元符號並格式化數字。
你們中有些人第一次聽說區域設定這個詞。它不是 JavaScript 中的任何方法，但它根據本地區域提供了一組引數。簡單來說，它指定了區域編號格式、日期和時間格式、貨幣格式、星期幾格式等。
語法
let formatting_options = {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 3,
}
let dollarString = new Intl.NumberFormat( locale_string, formatting_options );引數
locale_string − 它應該根據您想要獲取本地引數的區域進行傳遞。例如，要獲取美國的本地引數，您將傳遞 ‘en-US’，對於印度，您將傳遞 ‘en-IN’。
formatting_options − 它是一個包含許多用於格式化數字字串的屬性的物件。主要的是，下面的三個選項屬性更有價值。
style − 這是數字格式化字串的基本樣式。它採用三個不同的值，例如“currency”、“decimal”和“percentage”。在本例中，我們將使用“currency”。
currency − 此引數指定貨幣符號，例如美元的“USD”。
minimumFractionDigits − 使用此引數，我們可以四捨五入小數點後數字的位數。
示例 2
下面的示例演示了 Intl.NumberFormatting() 方法的使用。
<!DOCTYPE html>
<html >
<head>
<body>
<h2> The Intl.NumberFormat() method</h2>
<p> Formatting 5323.35445 as US dollars (US$):</p>
<p id="result"></p>
<p> We set minimumFractionDigits to 3.</p>
<script type="text/javascript">
// function to format number with Intl.NumberFormat() method.
function formatNumberWithDollar() {
let formatting_options = {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 3,
}
// users can see how locale passed as a parameter.
let dollarString = new Intl.NumberFormat("en-US", formatting_options);
let finalString = dollarString.format(5323.35445);
var result = document.getElementById("result");
result.innerHTML = finalString;
}
formatNumberWithDollar();
</script>
</body>
</html>在上面的輸出中，使用者可以看到數字被四捨五入到 3 位，並以美元符號表示為字串。
使用 toLocaleString() 方法
toLocaleString() 也是 JavaScript 中內建的方法，類似於 Intl.numberFormat() 方法。它採用與 Intl.numberFormat 方法相同的引數，並將字串轉換為特定於區域的字串。
語法
let formatting_options = {
style: ‘currency’,
currency: ‘USD’,
minimumFractionDigits: 3,
}
let dollarString = toLocaleString( locale_string, formatting_options );引數
它採用與 Intl.numberFormat() 方法相同的引數。使用者可以參考上述方法。
示例 3
下面的示例演示了使用 toLocaleString() 方法在數字前新增美元符號進行格式化。
<!DOCTYPE html>
<html >
<head>
<body>
<h2> The toLocaleString() method</h2>
<p> Formatting 2434454.6554 as US dollars (US$):</p>
<p id="result"></p>
<script type="text/javascript">
let formatting_options = {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 3,
}
let price = 2434454.6554;
let numberWithDollar = price.toLocaleString("en-US",
formatting_options);
var result = document.getElementById("result");
result.innerHTML = numberWithDollar;
</script>
</body>
</html>上述方法給出的輸出與 Intl.numberFormat() 方法相同。在上面的結果中，使用者可以看到數字前面帶有美元符號，並且小數點後四捨五入到 3 位。
結論
本教程向我們介紹了三種不同的方法來使用美元字串格式化數字。解決我們問題的最佳和標準方法是第二種方法。使用 Intl.numberFormat() 方法，您可以將所有字串、數字和引數轉換為區域敏感的字串。
15K+ 次瀏覽
