使用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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
js实现密码强度检验
Jan 15 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
使用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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
js 遍历对象的属性的代码
2011/12/29 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
常用DOM整理
2015/06/16 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
用Python写冒泡排序代码
2016/04/12 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
一套Java笔试题
2016/08/20 面试题
公司前台接待岗位职责
2013/12/03 职场文书
乡下人家教学反思
2014/02/01 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
学校政风行风整改方案
2014/10/25 职场文书
学习心理学心得体会
2016/01/22 职场文书
古诗之感恩老师
2019/10/24 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
搭建Yolov5服务器
2022/04/30 Servers