helloweba

纯js实用格式化货币插件

通过OSREC.CurrencyFormatter.format(number, parameters)方法可以非常容易的格式一个数值。只需要简单的在配置参数中设置你需要的格式即可。 参数的格式如下： 


var parameters = 
{ 
	currency: 	'EUR', 			// If currency is not supplied, defaults to USD
	symbol: 	'EUR',			// Overrides the currency's default symbol
	locale: 	'fr',			// Overrides the currency's default locale (see supported locales)
	decimal:	',',			// Overrides the locale's decimal character
	group: 		'.',			// Overrides the locale's group character (thousand separator)
	pattern: 	'#,##0.00 !'		// Overrides the locale's default display pattern 
	
	// The pattern follows standard unicode currency pattern notation.
	// comma = group separator, dot = decimal separator, exclamation = currency symbol
}

通常你不需要指定所有的参数。该插件会使用适当的格式来显示每一种货币和语言设置。 


OSREC.CurrencyFormatter.format(2534234, { currency: 'INR' }); // Returns ₹ 25,34,234.00
OSREC.CurrencyFormatter.format(2534234, { currency: 'EUR' }); // Returns 2.534.234,00 €
OSREC.CurrencyFormatter.format(2534234, { currency: 'EUR', locale: 'fr' }); // Returns 2 534 234,00 €

› 示例一：将数值作为货币值来进行格式

如果你需要将所有包含数值的元素都转换为好看的格式，你使用OSREC.CurrencyFormatter.formatAll(parameters)方法。


HTML

<div class='money'> 1234536.32 </div>
<div class='money'> 8798458.11 </div>
JavaScript

// Applies a single currency format to all selected elements

OSREC.CurrencyFormatter.formatAll(
{
	selector: '.money', 
	currency: 'CNY'
});
Result
1234536.32
8798458.11

› 示例二： Format each element with a specific currency

OSREC.CurrencyFormatter.formatEach(selector) 方法可以将页面中带有data-ccy属性的元素转换为不同的货币值。

HTML

<div class='money' data-ccy='EUR'> 1234564.58 </div>
<div class='money' data-ccy='GBP'> 8798583.85 </div>
<div class='money' data-ccy='CHF'> 0.9754 </div>
<div>Your INR value is: <span class='money' data-ccy='INR'> 322453.9754 </span></div>
JavaScript

OSREC.CurrencyFormatter.formatEach('.money');
Result
1234564.58
8798583.85
0.9754
Your INR value is: 322453.9754

› 示例三： Fully bespoke data formatter

OSREC.CurrencyFormatter.getFormatter(parameters) 方法可以返回一个定制货币格式的函数。这是用于格式化大量数值的常用方法。

HTML

<input id='frenchEuroInput' value='78234564.5815899' />
JavaScript

// Once generated, the formatter below can used over 
// and over again to format any number of currencies
	
var frenchEuroFormatter = OSREC.CurrencyFormatter.getFormatter
({
	// If currency is not supplied, defaults to USD
	currency: 	'EUR',

	// Use to override the currency's default symbol
	symbol: 	'EUR',
	
	// Use to override the currency's default locale - every locale has
	// preconfigured decimal, group and pattern
	locale: 	'fr',
	
	// Use to override the locale's default decimal character
	decimal:	',',
	
	// Use to override the locale's default group (thousand separator) character	 
	group: 		'.',

	// Use to override the locale's default display pattern 
	// Note comma = group separator, dot = decimal separator, exclamation = symbol
	// Follows standard unicode currency pattern
	pattern: 	'#,##0.00 !' 

});

var val = document.getElementById('frenchEuroInput').value;

var formattedVal = frenchEuroFormatter(val);

document.getElementById('frenchEuroInput').value = formattedVal;
Result

› 示例四： Negative and Zero Formats

如果你需要区分负数，0和正数，你可以在模式参数中通过分号来指定它们各自的格式。如positivePattern;negativePattern;zeroPattern。下面的例子指定瑞士法郎（CHF）的三种不同格式：

HTML

<div class='money'> 7564.58 </div>
<div class='money'> -4583.85 </div>
<div class='money'> 0 </div>
JavaScript

OSREC.CurrencyFormatter.formatAll
({
	selector: '.money',
	currency: 'CHF',
	pattern: '#,##0.00 !;(#,##0.00 !);0.00 !'
});
Result
7564.58
-4583.85
0