JavaScript-Tool:Numeral.js
| ylbtech-JavaScript-Tool:Numeral.js |
A javascript library for formatting and manipulating numbers.
| 1. # Use it返回顶部 |
<script src="numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
npm install numeral
var numeral = require('numeral');
| 2. # Create返回顶部 |
var myNumeral = numeral(1000); var value = myNumeral.value();
// var myNumeral2 = numeral('1,000'); var value2 = myNumeral2.value();
//
| Input | Value |
|---|
| 3. # Format返回顶部 |
var string = numeral(1000).format('0,0');
// '1,000'
Numbers
| Number | Format | String |
|---|
Currency
| Number | Format | String |
|---|
Bytes
| Number | Format | String |
|---|
Percentages
| Number | Format | String |
|---|
Time
| Number | Format | String |
|---|
Exponential
| Number | Format | String |
|---|
| 4. # Founctions返回顶部 |
Value
The value is always available.
var number = numeral(1000);
var string = number.format('0,0');
// '1,000'
var value = number.value();
//
Manipulate
Not that you will use these often, but they're there when you need them.
var number = numeral(1000); var added = number.add(10);
//
| Before | Function | After |
|---|
Set
Set the value of your numeral object.
var number = numeral(); number.set(1000); var value = number.value();
//
Difference
Find the difference between your numeral object and a value
var number = numeral(1000),
value = 100; var difference = number.difference(value);
//
Clone
Go ahead and clone any numeral object while you're at it.
var a = numeral(1000);
var b = numeral(a);
var c = a.clone(); var aVal = a.set(2000).value();
// var bVal = b.value();
// var cVal = c.add(10).value();
//
| 5. # Settings返回顶部 |
Default Formatting
Set a default format so you can use .format() without a string. The default format to '0,0'
var number = numeral(1000); number.format();
// '1,000' numeral.defaultFormat('$0,0.00'); number.format();
// '$1,000.00'
Custom Zero and Null Formatting
Set a custom output when formatting numerals with a value of 0 or null
var number = numeral(0);
var nullNumber = numeral(null); numeral.zeroFormat('N/A');
numeral.nullFormat('N/A'); var zero = number.format('0.0')
// 'N/A' var na = nullNumber.format('0.0')
// 'N/A'
| 6. Locales返回顶部 |
Let's make this useable all over the place!
// load a locale
numeral.register('locale', 'fr', {
delimiters: {
thousands: ' ',
decimal: ','
},
abbreviations: {
thousand: 'k',
million: 'm',
billion: 'b',
trillion: 't'
},
ordinal : function (number) {
return number === 1 ? 'er' : 'ème';
},
currency: {
symbol: '€'
}
}); // switch between locales
numeral.locale('fr');
As I am not fluent in every locale on the planet, please feel free to create locale files of your own by submitting a pull request. Don't forget to create both the locale file (example: locales/fr.js) and the locale test (example: tests/locales/fr.js). Thanks for helping out.
| 7. # Fomates返回顶部 |
Adding your own custom formats is as easy as adding a locale.
// load a format
numeral.register('format', 'percentage', {
regexps: {
format: /(%)/,
unformat: /(%)/
},
format: function(value, format, roundingFunction) {
var space = numeral._.includes(format, ' %') ? ' ' : '',
output; value = value * 100; // check for space before %
format = format.replace(/\s?\%/, ''); output = numeral._.numberToFormat(value, format, roundingFunction); if (numeral._.includes(output, ')')) {
output = output.split(''); output.splice(-1, 0, space + '%'); output = output.join('');
} else {
output = output + space + '%';
} return output;
},
unformat: function(string) {
return numeral._.stringToNumber(string) * 0.01;
}
}); // use your custom format
numeral().format('0%');
| 8. # Acknowlegements返回顶部 |
| 9.返回顶部 |
| 10.返回顶部 |
| 11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
JavaScript-Tool:Numeral.js的更多相关文章
- 检测设备平台,操作系统,方向 Javascript 库:Device.js
Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <html> 标签添加一些设备平台,操作系统,方向相关的 CSS class,这样就 ...
- javascript动画:velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- JavaScript入门:004—JS凝视的写法和基本运算符
JS的凝视JS中加凝视和寻常写C#代码是几乎相同的.有//和/* */这两种.单行凝视使用双斜杠比如. <script type="text/javascript"> ...
- JavaScript入门:006—JS函数的定义
JS函数的声明. 声明函数的格式例如以下: function 函数名(參数列表){ //函数语句: return 返回值; } 来看详细的函数声明.1.普通函数 <script type=&qu ...
- OpenPGP协议的一个JavaScript实现:OpenPGP.js
OpenPGP.js 是OpenPGP协议的一个Javascript实现. 基于 JavaScript的OpenPGP实现方便用户可以直接在浏览器中加密和解密Web邮件,不需要专门的邮件客户端.
- JavaScript入门:002—JS代码放置的位置
JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...
- JavaScript入门:003—JS中的变量
编程语言都是同样的,JS中也是有变量的.首先JS的变量是区分大写和小写的,这个须要注意.比方number和Number是不同的变量.无论是经常使用类型的,还是对象类型,比方 Object obj和Ob ...
- 一个必用的javascript框架:underscore.js - wine的思考 - ITeye技术网站
AngularJS+JqueryMobile+PhoneGap 打造APP « Dogeek AngularJS+JqueryMobile+PhoneGap 打造APP
- Numeral.js – 格式化和操作数字的 JavaScript 库
Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...
随机推荐
- 使用MyEclipse开发Java EE应用:EJB项目开发初探(下)
你开学,我放价!MyEclipse线上狂欢继续!火热开启中>> [MyEclipse最新版下载] 三.EJB 3.x项目中的持久性支持 当创建EJB 3.x项目时,作为选项您可以添加JPA ...
- CUDA ---- Branch Divergence and Unrolling Loop
Avoiding Branch Divergence 有时,控制流依赖于thread索引.同一个warp中,一个条件分支可能导致很差的性能.通过重新组织数据获取模式可以减少或避免warp diverg ...
- bjui的ajax form不使用validate的表单验证
当form使用data-toggle为ajaxform或者是validate的时候,表单的onSubmit()和submit按钮的click()事件明明return false:还是会提交. 如果将d ...
- 福大软工1816 - 第八次作业(课堂实战)- 项目UML设计
团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...
- 解决:编辑一条彩信,附件选择添加音频,返回到编辑界面选择play,不能播放,没有声音
[操作步骤]:编辑一条彩信,附件选择添加音频(外部音频),返回到编辑界面选择play,菜单键选择view slideshow [测试结果]:不能播放,没有声音 [预期结果]:可以播放 根据以往的经验( ...
- Python学习(002)--Python介绍
一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...
- Texas Instruments matrix-gui-2.0 hacking -- menubar.php
<?php /* * Copyright (C) 2011 Texas Instruments Incorporated - http://www.ti.com/ * * * Redistrib ...
- TJU Problem 2857 Digit Sorting
原题: 2857. Digit Sorting Time Limit: 1.0 Seconds Memory Limit: 65536KTotal Runs: 3234 Accepted ...
- Robot Framework 自定义库
进入 python安装路径\Lib\site-packages 创建文件夹,库名 创建py文件,myclass.py 创建py文件,__init__.py 导入自定义库 遇到的问题: python版 ...
- 代理模式及Spring AOP (二)
一.Spring AOP 1.1 Spring AOP 底层还是用的动态代理.如果目标对象所对应的类有接口,spring就用jdk生成代理对象: 如果目标对象所对应的类没有接口,spring就用C ...
