accounting.js_使用Accounting.js格式化数字-CSDN博客

在网络上时，我们使用数字来显示未读的消息，评论，喜欢，推文和其他大量物品，当涉及格式化数字以用于银行或金融机构时，显示数字可能需要一些解决方法。

如果您需要数字以货币格式显示或用逗号或小数点分隔 ，那么您会喜欢使用Accounting.js ，这是一个用于货币和货币格式JavaScript库。

在本文中，我们将向您展示其一些基本功能，然后在一个实际示例中利用它来展示其工作原理。让我们开始吧。

入门

Accounting.js是一个没有依赖关系JavaScript库。您不需要jQuery来使用它；它可以独立运行。从Github存储库下载源代码，将其放在适当的目录中，然后将文件链接到HTML文档中。

<script src="js/accounting.js"></script>

基本格式

Accounting.js提供了几种格式化数字的方法。我们要看的第一个是formatMoney() 。此方法是将数字转换为货币的基本功能。要使用它，每种方法都要先进行accounting ，然后再加上方法的名称。例如：

accounting.formatMoney(2000000);

在默认设置中，Accounting.js将显示上面的示例带有美元符号，用逗号将每三个数字分开，并使用小数点将美元与美分分开。

$2,000,000.00

某些国家/地区每三位数（千位）和十进制使用不同的分隔符。 Accounting.js完全可本地化。如果默认输出不是您当地货币的显示方式，则可以使用选项进行更改。

下面，我们以德语为例，它使用点分隔符（千位）和逗号（十进制）：

accounting.formatMoney(2000000, {	
	symbol   : "€",
	thousand : ".",
	decimal  : ",",
});

这将输出：

€2.000.000,00

如果要格式化不带货币符号的数字，则可以使用formatNumber()方法。

舍入数

货币可能有小数。但是我们通常将它们向上或向下舍入到最接近的值，以使数字更容易记住或猜测。在Accounting.js中 ，我们可以使用.toFixed()来实现。此示例显示了如何删除小数位并将其四舍五入到最接近的十分之一：

accounting.toFixed(102.58, 0);

输出为：

构建一个简单的货币转换器

在本节中，我们将使用上面提到的那些功能来构建货币转换器 。我们将不会构建一个广泛的转换器，而只是一个简单的实例来说明Accounting.js可以做什么。

在练习中，我们将USD转换为2种货币，即KRW（韩元）和JPY（日元）。

让我们按如下所示布置文档结构：

<div class="currency-option">
	<div class="row">
		<h4 class="heading">From</h4>
		<select id="input-currency" disabled>
			<option value="USD" data-symbol="$" selected>US Dollar</option>
		</select>
		<span id="input-symbol">$</span> <input id="input-number" class="input" type="number" min="0">
	</div>

	<div  class="row">
		<h4 class="heading">To</h4>
		<select id="output-currency">
			<option value="krw" data-symbol="₩" selected>Korean Won</option>
			<option value="jpy" data-symbol="¥">Japanese Yen</option>
		</select>
		<span id="output-number">₩ 0</span>
	</div>
</div>

正如我们在上面看到的，我们有两行div 。第一行包含一个下拉选项，该选项设置为USD，并且已禁用，因此用户将无法选择其他选项。该行还包含一个number类型输入字段，我们将在其中输入要转换的美元数量。

在第二行中，我们也有一个下拉选项，其中包含两个货币选项：韩元和日元。每个选项都有一个value属性和一个data-symbol属性，用于存储货币符号。我们使用一个span元素来输出转换后的结果。

汇率

在撰写本文时，1美元等于1077.80韩元和102.24日元。我们可以从Open Exchange Rate实时获取这些汇率值。但是，目前，我们只需要使用.toFixed()方法将值放在变量中就可以对数字取整：

var jpy = accounting.toFixed(102.24, 0),
	krw = accounting.toFixed(1077.80, 0),

获取选项

接下来，我们将创建一个新函数，以从下拉选项的value和data-symbol属性获取值。然后将这些值存储在Array 。

var getCurrency = function(elem) {
	var $curAbbr = elem.find(':selected').val(),
		$curSign = elem.find(':selected').data('symbol');
		return {
			'symbol'  : $curSign,
			'value' : $curAbbr,
		};
	};

转换功能

我们希望转换实时发生 。这意味着它将在用户在输入字段中键入或在货币之间切换时发生。

为了实现这个想法，我们将为#output-currency和#input-number分配三个JavaScript事件，分别是change ， keyup和keydown ：

$('#output-currency, #input-number').on('change keyup keydown', function() {
	// the stuff
}

然后，我们将使用上面创建的getCurrency函数从下拉选项#output-currency检索值。值被分隔在两个不同的变量中，即$symbol和$val ，如下所示。

var $currency = getCurrency($('#output-currency')),
	$symbol   = $currency['symbol'],
	$val      = $currency['value'];

我们还需要从输入字段中获取数字，以及我们在jpy和krw变量中设置的当前汇率值；使用条件函数，我们可以决定使用哪种货币汇率（krw或jpy）。

// get number
var mulitplyNum = ($val == 'jpy') ? jpy : krw;
var	$getInput   = $('#input-number').val();

使用上面的数字，我们可以计算结果。

var	$getTotal   = ($getInput * mulitplyNum);

但是，在输出数字之前，让我们使用.formatMoney()方法将其包装为正确的格式：

var	number = accounting.formatMoney($getTotal, {
		symbol    : $symbol,
		precision : 0,
		thousand  : ','
	});

最后，我们输出最终的格式化数字。

$('#output-number').text(number);

我们完成了。您可以在下面查看实际的演示。

您也可以在我们的演示页面上自己尝试。

最终思想

将纯数字格式转换为货币并不像您想象的那样难。使用Accounting.js，这件事变得非常容易。我们还向您展示了如何实现构建简单的工作货币转换器的功能。搏一搏。

翻译自: https://www.hongkiat.com/blog/jquery-accounting-js/