使用js实现数据格式化


Posted in Javascript onDecember 03, 2014

格式化是通过格式操作使任意类型的数据转换成一个字符串。例如下面这样

<script>

console.log(chopper.format('{0} - {1} - {2}', 12, 24, 25)); // outputs "12 - 24 - 25"

</script>

下面是一个完整的代码,可以复制到自己的项目中。

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

     </head>

     <body>

         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

         <script>

         (function() {

             var chopper = window.chopper = window.chopper || { cultures: {} },

                 math = Math,

                 formatRegExp = /\{(\d+)(:[^\}]+)?\}/g,

                 FUNCTION = "function",

                 STRING = "string",

                 NUMBER = "number",

                 OBJECT = "object",

                 NULL = "null",

                 BOOLEAN = "boolean",

                 UNDEFINED = "undefined",

                 slice = [].slice,

                 globalize = window.Globalize,

                 standardFormatRegExp =  /^(n|c|p|e)(\d*)$/i,

                 literalRegExp = /(\\.)|(['][^']*[']?)|(["][^"]*["]?)/g,

                 commaRegExp = /\,/g,

                 EMPTY = "",

                 POINT = ".",

                 COMMA = ",",

                 SHARP = "#",

                 ZERO = "0",

                 PLACEHOLDER = "??",

                 EN = "en-US",

                 objectToString = {}.toString;

             //cultures

             chopper.cultures["en-US"] = {

                 name: EN,

                 numberFormat: {

                     pattern: ["-n"],

                     decimals: 2,

                     ",": ",",

                     ".": ".",

                     groupSize: [3],

                     percent: {

                         pattern: ["-n %", "n %"],

                         decimals: 2,

                         ",": ",",

                         ".": ".",

                         groupSize: [3],

                         symbol: "%"

                     },

                     currency: {

                         pattern: ["($n)", "$n"],

                         decimals: 2,

                         ",": ",",

                         ".": ".",

                         groupSize: [3],

                         symbol: "$"

                     }

                 },

                 calendars: {

                     standard: {

                         days: {

                             names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],

                             namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],

                             namesShort: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]

                         },

                         months: {

                             names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],

                             namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

                         },

                         AM: [ "AM", "am", "AM" ],

                         PM: [ "PM", "pm", "PM" ],

                         patterns: {

                             d: "M/d/yyyy",

                             D: "dddd, MMMM dd, yyyy",

                             F: "dddd, MMMM dd, yyyy h:mm:ss tt",

                             g: "M/d/yyyy h:mm tt",

                             G: "M/d/yyyy h:mm:ss tt",

                             m: "MMMM dd",

                             M: "MMMM dd",

                             s: "yyyy'-'MM'-'ddTHH':'mm':'ss",

                             t: "h:mm tt",

                             T: "h:mm:ss tt",

                             u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",

                             y: "MMMM, yyyy",

                             Y: "MMMM, yyyy"

                         },

                         "/": "/",

                         ":": ":",

                         firstDay: 0,

                         twoDigitYearMax: 2029

                     }

                 }

             };

              function findCulture(culture) {

                 if (culture) {

                     if (culture.numberFormat) {

                         return culture;

                     }

                     if (typeof culture === STRING) {

                         var cultures = chopper.cultures;

                         return cultures[culture] || cultures[culture.split("-")[0]] || null;

                     }

                     return null;

                 }

                 return null;

             }

             function getCulture(culture) {

                 if (culture) {

                     culture = findCulture(culture);

                 }

                 return culture || chopper.cultures.current;

             }

             function expandNumberFormat(numberFormat) {

                 numberFormat.groupSizes = numberFormat.groupSize;

                 numberFormat.percent.groupSizes = numberFormat.percent.groupSize;

                 numberFormat.currency.groupSizes = numberFormat.currency.groupSize;

             }

             chopper.culture = function(cultureName) {

                 var cultures = chopper.cultures, culture;

                 if (cultureName !== undefined) {

                     culture = findCulture(cultureName) || cultures[EN];

                     culture.calendar = culture.calendars.standard;

                     cultures.current = culture;

                     if (globalize && !globalize.load) {

                         expandNumberFormat(culture.numberFormat);

                     }

                 } else {

                     return cultures.current;

                 }

             };

             chopper.culture(EN);

             //number formatting

             function formatNumber(number, format, culture) {

                 culture = getCulture(culture);

                 var numberFormat = culture.numberFormat,

                     groupSize = numberFormat.groupSize[0],

                     groupSeparator = numberFormat[COMMA],

                     decimal = numberFormat[POINT],

                     precision = numberFormat.decimals,

                     pattern = numberFormat.pattern[0],

                     literals = [],

                     symbol,

                     isCurrency, isPercent,

                     customPrecision,

                     formatAndPrecision,

                     negative = number < 0,

                     integer,

                     fraction,

                     integerLength,

                     fractionLength,

                     replacement = EMPTY,

                     value = EMPTY,

                     idx,

                     length,

                     ch,

                     hasGroup,

                     hasNegativeFormat,

                     decimalIndex,

                     sharpIndex,

                     zeroIndex,

                     hasZero, hasSharp,

                     percentIndex,

                     currencyIndex,

                     startZeroIndex,

                     start = -1,

                     end;

                 //return empty string if no number

                 if (number === undefined) {

                     return EMPTY;

                 }

                 if (!isFinite(number)) {

                     return number;

                 }

                 //if no format then return number.toString() or number.toLocaleString() if culture.name is not defined

                 if (!format) {

                     return culture.name.length ? number.toLocaleString() : number.toString();

                 }

                 formatAndPrecision = standardFormatRegExp.exec(format);

                 // standard formatting

                 if (formatAndPrecision) {

                     format = formatAndPrecision[1].toLowerCase();

                     isCurrency = format === "c";

                     isPercent = format === "p";

                     if (isCurrency || isPercent) {

                         //get specific number format information if format is currency or percent

                         numberFormat = isCurrency ? numberFormat.currency : numberFormat.percent;

                         groupSize = numberFormat.groupSize[0];

                         groupSeparator = numberFormat[COMMA];

                         decimal = numberFormat[POINT];

                         precision = numberFormat.decimals;

                         symbol = numberFormat.symbol;

                         pattern = numberFormat.pattern[negative ? 0 : 1];

                     }

                     customPrecision = formatAndPrecision[2];

                     if (customPrecision) {

                         precision = +customPrecision;

                     }

                     //return number in exponential format

                     if (format === "e") {

                         return customPrecision ? number.toExponential(precision) : number.toExponential(); // toExponential() and toExponential(undefined) differ in FF #653438.

                     }

                     // multiply if format is percent

                     if (isPercent) {

                         number *= 100;

                     }

                     number = round(number, precision);

                     negative = number < 0;

                     number = number.split(POINT);

                     integer = number[0];

                     fraction = number[1];

                     //exclude "-" if number is negative.

                     if (negative) {

                         integer = integer.substring(1);

                     }

                     value = integer;

                     integerLength = integer.length;

                     //add group separator to the number if it is longer enough

                     if (integerLength >= groupSize) {

                         value = EMPTY;

                         for (idx = 0; idx < integerLength; idx++) {

                             if (idx > 0 && (integerLength - idx) % groupSize === 0) {

                                 value += groupSeparator;

                             }

                             value += integer.charAt(idx);

                         }

                     }

                     if (fraction) {

                         value += decimal + fraction;

                     }

                     if (format === "n" && !negative) {

                         return value;

                     }

                     number = EMPTY;

                     for (idx = 0, length = pattern.length; idx < length; idx++) {

                         ch = pattern.charAt(idx);

                         if (ch === "n") {

                             number += value;

                         } else if (ch === "$" || ch === "%") {

                             number += symbol;

                         } else {

                             number += ch;

                         }

                     }

                     return number;

                 }

                 //custom formatting

                 //

                 //separate format by sections.

                 //make number positive

                 if (negative) {

                     number = -number;

                 }

                 if (format.indexOf("'") > -1 || format.indexOf("\"") > -1 || format.indexOf("\\") > -1) {

                     format = format.replace(literalRegExp, function (match) {

                         var quoteChar = match.charAt(0).replace("\\", ""),

                             literal = match.slice(1).replace(quoteChar, "");

                         literals.push(literal);

                         return PLACEHOLDER;

                     });

                 }

                 format = format.split(";");

                 if (negative && format[1]) {

                     //get negative format

                     format = format[1];

                     hasNegativeFormat = true;

                 } else if (number === 0) {

                     //format for zeros

                     format = format[2] || format[0];

                     if (format.indexOf(SHARP) == -1 && format.indexOf(ZERO) == -1) {

                         //return format if it is string constant.

                         return format;

                     }

                 } else {

                     format = format[0];

                 }

                 percentIndex = format.indexOf("%");

                 currencyIndex = format.indexOf("$");

                 isPercent = percentIndex != -1;

                 isCurrency = currencyIndex != -1;

                 //multiply number if the format has percent

                 if (isPercent) {

                     number *= 100;

                 }

                 if (isCurrency && format[currencyIndex - 1] === "\\") {

                     format = format.split("\\").join("");

                     isCurrency = false;

                 }

                 if (isCurrency || isPercent) {

                     //get specific number format information if format is currency or percent

                     numberFormat = isCurrency ? numberFormat.currency : numberFormat.percent;

                     groupSize = numberFormat.groupSize[0];

                     groupSeparator = numberFormat[COMMA];

                     decimal = numberFormat[POINT];

                     precision = numberFormat.decimals;

                     symbol = numberFormat.symbol;

                 }

                 hasGroup = format.indexOf(COMMA) > -1;

                 if (hasGroup) {

                     format = format.replace(commaRegExp, EMPTY);

                 }

                 decimalIndex = format.indexOf(POINT);

                 length = format.length;

                 if (decimalIndex != -1) {

                     fraction = number.toString().split("e");

                     if (fraction[1]) {

                         fraction = round(number, Math.abs(fraction[1]));

                     } else {

                         fraction = fraction[0];

                     }

                     fraction = fraction.split(POINT)[1] || EMPTY;

                     zeroIndex = format.lastIndexOf(ZERO) - decimalIndex;

                     sharpIndex = format.lastIndexOf(SHARP) - decimalIndex;

                     hasZero = zeroIndex > -1;

                     hasSharp = sharpIndex > -1;

                     idx = fraction.length;

                     if (!hasZero && !hasSharp) {

                         format = format.substring(0, decimalIndex) + format.substring(decimalIndex + 1);

                         length = format.length;

                         decimalIndex = -1;

                         idx = 0;

                     } if (hasZero && zeroIndex > sharpIndex) {

                         idx = zeroIndex;

                     } else if (sharpIndex > zeroIndex) {

                         if (hasSharp && idx > sharpIndex) {

                             idx = sharpIndex;

                         } else if (hasZero && idx < zeroIndex) {

                             idx = zeroIndex;

                         }

                     }

                     if (idx > -1) {

                         number = round(number, idx);

                     }

                 } else {

                     number = round(number);

                 }

                 sharpIndex = format.indexOf(SHARP);

                 startZeroIndex = zeroIndex = format.indexOf(ZERO);

                 //define the index of the first digit placeholder

                 if (sharpIndex == -1 && zeroIndex != -1) {

                     start = zeroIndex;

                 } else if (sharpIndex != -1 && zeroIndex == -1) {

                     start = sharpIndex;

                 } else {

                     start = sharpIndex > zeroIndex ? zeroIndex : sharpIndex;

                 }

                 sharpIndex = format.lastIndexOf(SHARP);

                 zeroIndex = format.lastIndexOf(ZERO);

                 //define the index of the last digit placeholder

                 if (sharpIndex == -1 && zeroIndex != -1) {

                     end = zeroIndex;

                 } else if (sharpIndex != -1 && zeroIndex == -1) {

                     end = sharpIndex;

                 } else {

                     end = sharpIndex > zeroIndex ? sharpIndex : zeroIndex;

                 }

                 if (start == length) {

                     end = start;

                 }

                 if (start != -1) {

                     value = number.toString().split(POINT);

                     integer = value[0];

                     fraction = value[1] || EMPTY;

                     integerLength = integer.length;

                     fractionLength = fraction.length;

                     if (negative && (number * -1) >= 0) {

                         negative = false;

                     }

                     //add group separator to the number if it is longer enough

                     if (hasGroup) {

                         if (integerLength === groupSize && integerLength < decimalIndex - startZeroIndex) {

                             integer = groupSeparator + integer;

                         } else if (integerLength > groupSize) {

                             value = EMPTY;

                             for (idx = 0; idx < integerLength; idx++) {

                                 if (idx > 0 && (integerLength - idx) % groupSize === 0) {

                                     value += groupSeparator;

                                 }

                                 value += integer.charAt(idx);

                             }

                             integer = value;

                         }

                     }

                     number = format.substring(0, start);

                     if (negative && !hasNegativeFormat) {

                         number += "-";

                     }

                     for (idx = start; idx < length; idx++) {

                         ch = format.charAt(idx);

                         if (decimalIndex == -1) {

                             if (end - idx < integerLength) {

                                 number += integer;

                                 break;

                             }

                         } else {

                             if (zeroIndex != -1 && zeroIndex < idx) {

                                 replacement = EMPTY;

                             }

                             if ((decimalIndex - idx) <= integerLength && decimalIndex - idx > -1) {

                                 number += integer;

                                 idx = decimalIndex;

                             }

                             if (decimalIndex === idx) {

                                 number += (fraction ? decimal : EMPTY) + fraction;

                                 idx += end - decimalIndex + 1;

                                 continue;

                             }

                         }

                         if (ch === ZERO) {

                             number += ch;

                             replacement = ch;

                         } else if (ch === SHARP) {

                             number += replacement;

                         }

                     }

                     if (end >= start) {

                         number += format.substring(end + 1);

                     }

                     //replace symbol placeholders

                     if (isCurrency || isPercent) {

                         value = EMPTY;

                         for (idx = 0, length = number.length; idx < length; idx++) {

                             ch = number.charAt(idx);

                             value += (ch === "$" || ch === "%") ? symbol : ch;

                         }

                         number = value;

                     }

                     length = literals.length;

                     if (length) {

                         for (idx = 0; idx < length; idx++) {

                             number = number.replace(PLACEHOLDER, literals[idx]);

                         }

                     }

                 }

                 return number;

             }

             var round = function(value, precision) {

                 precision = precision || 0;

                 value = value.toString().split('e');

                 value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + precision) : precision)));

                 value = value.toString().split('e');

                 value = +(value[0] + 'e' + (value[1] ? (+value[1] - precision) : -precision));

                 return value.toFixed(precision);

             };

             var toString = function(value, fmt, culture) {

                 if (fmt) {

                     if (typeof value === NUMBER) {

                         return formatNumber(value, fmt, culture);

                     }

                 }

                 return value !== undefined ? value : "";

             };

             if (globalize && !globalize.load) {

                 toString = function(value, format, culture) {

                     if ($.isPlainObject(culture)) {

                         culture = culture.name;

                     }

                     return globalize.format(value, format, culture);

                 };

             }

             chopper.format = function(fmt) {

                 var values = arguments;

                 return fmt.replace(formatRegExp, function(match, index, placeholderFormat) {

                     var value = values[parseInt(index, 10) + 1];

                     return toString(value, placeholderFormat ? placeholderFormat.substring(1) : "");

                 });

             };

         })();

         </script>

     </body>

 </html>

API:

chopper.format('{0} is playing {1}', 'Xiaoming', 'basketball'); // outputs "Xiaoming is playing basketball"

// 价格

chopper.format('{0:c} - {1:c}', 10, 20); // outputs "10.00−20.00"

// 指数

chopper.format('指数: {0:e}', 25); // outputs "指数: 2.5e+1"

// 百分数

chopper.format('百分数: {0:p}', 25); // outputs "百分数: 2,500.00 %"

// 小数

chopper.format('小数: {0:n}', 25); // outputs "小数: 25.00"

小结:

开发中格式化数据还是经常用到的,比如我们要根据变量提示不同的信息,但是内容模板都是一样的,这样的话我们就可以使用此方法。如果你的项目使用jQuery,你也可以将上面的javascript封装成jQuery插件。

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
shiro授权的实现原理
Sep 21 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
Vue和Flask通信的实现
May 19 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
使用js获取图片原始尺寸
Dec 03 #Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 #Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 #Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 #Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
You might like
destoon复制新模块的方法
2014/06/21 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php数组使用规则分析
2015/02/27 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
超简单的Python HTTP服务
2019/07/22 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
python 进程池pool使用详解
2020/10/15 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
一道写SQL的面试题和答案
2013/11/19 面试题
DataList 能否分页,请问如何实现?
2015/05/03 面试题
国外软件测试工程师面试题
2016/12/09 面试题
个人实用的自我评价范文
2013/11/23 职场文书
实习单位鉴定评语
2014/04/26 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
会计工作岗位职责
2015/02/03 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
理解深度学习之深度学习简介
2021/04/14 Python
用python实现监控视频人数统计
2021/05/21 Python