数据结构
网络
关系数据库管理系统 (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+ 次浏览
