技术控

    今日:130| 主题:49488
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] CurrencyFormatter.js – A super simple currency formatting library

[复制链接]
Thedeathoflove 发表于 2016-10-3 13:11:24
81 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
About

  CurrencyFormatter.js allows users to format numbers in a variety of currency formats. It contains 155 currency definitions, and 715 locale definitions right out of the box, and can handle unusually formatted currencies, such as the INR and is completely configurable.
  This library is lovingly maintained in London by    OSREC Financial. It is available for both commercial and non-commercial use under the MIT licence. Bugs and issues should be reported via github. If you use the library, please do mention us :)  
  Setup

      Download ZIP
    https://github.com/osrec/currencyFormatter.js/archive/master.zip    Or, clone Github Repository:
          git clone https://github.com/osrec/currencyFormatter.js.gitReference in your HTML as shown below - the library has no dependecies :)   
   
  1. <script type='text/javascript' src='currencyFormatter.js'></script>       
  2. <!--OR-->
  3. <script type='text/javascript' src='currencyFormatter.min.js'></script>
复制代码
Usage

  › Basic Formatting

  Formatting a number is pretty straightforward with the    OSREC.CurrencyFormatter.format(number, parameters)method. Simply pass in your    numberalong with the required    parameters. The    parameterscan include the following:  
  1. var parameters =
  2. {
  3.         currency:         'EUR',                         // If currency is not supplied, defaults to USD
  4.         symbol:         '€',                        // Overrides the currency's default symbol
  5.         locale:         'fr',                        // Overrides the currency's default locale (see supported locales)
  6.         decimal:        ',',                        // Overrides the locale's decimal character
  7.         group:                 '.',                        // Overrides the locale's group character (thousand separator)
  8.         pattern:         '#,##0.00 !'                // Overrides the locale's default display pattern
  9.        
  10.         // The pattern follows standard unicode currency pattern notation.
  11.         // comma = group separator, dot = decimal separator, exclamation = currency symbol
  12. }
复制代码
Usually, you will not need to specify all the parameters, and can simply specify the currency (and the locale, if needed). The library is aware of the appropriate format to use for every currency and locale.
  1. OSREC.CurrencyFormatter.format(2534234, { currency: 'INR' }); // Returns ₹ 25,34,234.00
  2. OSREC.CurrencyFormatter.format(2534234, { currency: 'EUR' }); // Returns 2.534.234,00 €
  3. OSREC.CurrencyFormatter.format(2534234, { currency: 'EUR', locale: 'fr' }); // Returns 2 534 234,00 €
复制代码
› Example 1: Format all element values as currency

  If you need to convert all elements that contain numerical values into well formatted currencies, you can do this easily using the    OSREC.CurrencyFormatter.formatAll(parameters)method. Simply pass in your element selector via the    selectorparameter, along with the    currency(you can also override a whole bunch of additional parameters - see above for more details).  
      HTML
   
  1. <div class='money'> 1234536.32 </div>
  2. <div class='money'> 8798458.11 </div>
复制代码
       JavaScript
   
  1. // Applies a single currency format to all selected elements
  2. OSREC.CurrencyFormatter.formatAll(
  3. {
  4.         selector: '.money',
  5.         currency: 'EUR'
  6. });
复制代码
       Result
      1234536.32
      8798458.11
        › Example 2: Format each element with a specific currency

  The    OSREC.CurrencyFormatter.formatEach(selector)method can be used to update a range of different currency values on a page by specifying the currency in the    data-ccyattribute.  
      HTML
   
  1. <div class='money' data-ccy='EUR'> 1234564.58 </div>
  2. <div class='money' data-ccy='GBP'> 8798583.85 </div>
  3. <div class='money' data-ccy='CHF'> 0.9754 </div>
  4. <div>Your INR value is: <span class='money' data-ccy='INR'> 322453.9754 </span></div>
复制代码
       JavaScript
   
  1. OSREC.CurrencyFormatter.formatEach('.money');
复制代码
       Result
      1234564.58
      8798583.85
      0.9754
      Your INR value is:        322453.9754      
        › Example 3: Fully bespoke data formatter

  The    OSREC.CurrencyFormatter.getFormatter(parameters)method returns a bespoke formatting    functionthat can be used to format currencies.    This is the most efficient way to format a large number of currencies.  
      HTML
   
  1. <input id='frenchEuroInput' value='78234564.5815899' />
复制代码
       JavaScript
   
  1. // Once generated, the formatter below can used over
  2. // and over again to format any number of currencies
  3.        
  4. var frenchEuroFormatter = OSREC.CurrencyFormatter.getFormatter
  5. ({
  6.         // If currency is not supplied, defaults to USD
  7.         currency:         'EUR',
  8.         // Use to override the currency's default symbol
  9.         symbol:         '€',
  10.        
  11.         // Use to override the currency's default locale - every locale has
  12.         // preconfigured decimal, group and pattern
  13.         locale:         'fr',
  14.        
  15.         // Use to override the locale's default decimal character
  16.         decimal:        ',',
  17.        
  18.         // Use to override the locale's default group (thousand separator) character         
  19.         group:                 '.',
  20.         // Use to override the locale's default display pattern
  21.         // Note comma = group separator, dot = decimal separator, exclamation = symbol
  22.         // Follows standard unicode currency pattern
  23.         pattern:         '#,##0.00 !'
  24. });
  25. var val = document.getElementById('frenchEuroInput').value;
  26. var formattedVal = frenchEuroFormatter(val);
  27. document.getElementById('frenchEuroInput').value = formattedVal;
复制代码
       Result
                  › Example 4: Negative and Zero Formats

  If you need to specify separate formats for negative numbers, positive numbers and zeros, you may do so by splitting them with a semi-colon like so:    positivePattern;negativePattern;zeroPattern. The example below defines a bespoke pattern for the Swiss Franc (CHF), where the negative numbers are formatted with enclosing brackets and zeros are formatted to 2 decimal places.  
      HTML
   
  1. <div class='money'> 7564.58 </div>
  2. <div class='money'> -4583.85 </div>
  3. <div class='money'> 0 </div>
复制代码
       JavaScript
   
  1. var parameters =
  2. {
  3.         currency:         'EUR',                         // If currency is not supplied, defaults to USD
  4.         symbol:         '€',                        // Overrides the currency's default symbol
  5.         locale:         'fr',                        // Overrides the currency's default locale (see supported locales)
  6.         decimal:        ',',                        // Overrides the locale's decimal character
  7.         group:                 '.',                        // Overrides the locale's group character (thousand separator)
  8.         pattern:         '#,##0.00 !'                // Overrides the locale's default display pattern
  9.        
  10.         // The pattern follows standard unicode currency pattern notation.
  11.         // comma = group separator, dot = decimal separator, exclamation = currency symbol
  12. }0
复制代码
       Result
      7564.58
      -4583.85
      0
        Supported Currencies

  The library currently supports the following currencies straight out of the box :)
  Supported Locales

    We use the standard ISO 2 digit language and country codes to define locales (as per the      Unicode Common Locale Data Repository). The library supports the below locales (yes, all 715 of them!).   
    In case you're not sure what a locale is, it is simply a set of parameters that define the standard language and regional preferences for someone using a particular language, in a particular region.
友荐云推荐




上一篇:Advanced KPI Configurations in SQL Server Reporting Services 2016
下一篇:TempBlob Façade: a pattern proposition
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

寻云 发表于 2016-10-4 20:54:56
有钱,就是任性,没钱,认命!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表