使用js实现数据格式化
格式化是通过格式操作使任意类型的数据转换成一个字符串。例如下面这样
<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插件。
相关推荐
-
JSON格式化输出
今天有个需求是对输出的JSON进行格式化 首先想到的就是jsBeautifier之类的小插件 搜索了一番看到有一位朋友回答JSON.stringify可以输出格式化的JSON字符串 复制代码 代码如下: JSON.stringify(jsObj, null, "\t"); // 缩进一个tab JSON.stringify(jsObj, null, 4); // 缩进4个空格 唔,不错 PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用: 在线J
-
对比分析json及XML
随着移动互联网时代的大潮,越来越多的App不光是需要和网络服务器进行数据传输和交互,也需要和其他 App 进行数据传递.承担App与网络来进行传输和存储数据的一般是XML或者JSON.在移动互联网时代,XML和JSON很重要. 最近一段时间,个人综合了之前对XML.JSON的一些了解,参考了相关资料,再结合视频的代码,把自己的一些思考融入了这篇总结文档中,同时尝试用通俗诙谐的语言风格来阐述,期望能给感兴趣的读者带来帮助. 为了不和时代落伍,我们必须要学习 XML 和 JSON,但同时它们也很容易
-
JS读取XML文件示例代码
复制代码 代码如下: //读取XML文件 function loadXML(xmlFile) { var xmlDoc; if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load(xmlFile); } else if (document.implementation && document.implement
-
js使用递归解析xml
xml结构: 复制代码 代码如下: <RightMenuItems> <Item Code="New" Name="新建" GroupCode="Edit" GroupName="编辑"/> <Item Code="Open" Name="打开" GroupCode="Edit" GroupName="编辑"&
-
C# DataSet的内容写成XML时如何格式化字段数据
欲达此目的,可以采用下列两种作法: ◆使用XmlConvert类. ◆将一个XSLT转换套用至DataSet数据的XML表示. 程序范例 本范例是利用XmlConvert类来完成字段的格式化操作. 复制代码 代码如下: // 导入命名空间. using System.Xml; using System.Data.SqlClient; using System.IO; private void btnWriteDataSetToXml_Click(object sender, EventArgs
-
js实现最短的XML格式化工具实例
本文实例讲述了js实现最短的XML格式化工具的方法.分享给大家供大家参考.具体如下: 这是用 E4X 实现最短的 XML 格式化工具.可惜 IE 至今不支持这个标准特性... 请在 Firefox 或 Chrome 下运行! 1.代码如下: 复制代码 代码如下: <html> <head> <title>Indent XML</title> <script language="JavaScript" type=&
-
js实现格式化金额,字符,时间的方法
本文实例讲述了js实现格式化金额,字符,时间的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: //金额转换成大写 function toDaX(num){ //金额大小写转换 if (isNaN(num) || num > Math.pow(10, 12)) return ""; var cn = "零壹贰叁肆伍陆柒捌玖";
-
如何使用Javascript正则表达式来格式化XML内容
使用得是Emeditor ,在看XML文档时,总是因为格式混乱而看不清.这个是一个Emeditor宏来自动格式化XML.下载:formatXml.rar(1,021.00 bytes)下面这段是这个网页版的javascript格式化XML的代码. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <meta http-
-
JS解析XML实例分析
本文实例讲述了JS解析XML的方法.分享给大家供大家参考.具体实现方法如下: <script type="javascript"> var txt="<note>"; txt=txt+"<to>George</to>"; txt=txt+"<from>John</from>"; txt=txt+"<heading>Reminder&l
-
使用js实现数据格式化
格式化是通过格式操作使任意类型的数据转换成一个字符串.例如下面这样 复制代码 代码如下: <script> console.log(chopper.format('{0} - {1} - {2}', 12, 24, 25)); // outputs "12 - 24 - 25" </script> 下面是一个完整的代码,可以复制到自己的项目中. 复制代码 代码如下: <!DOCTYPE html> <html> <hea
-
vue.js实现价格格式化的方法
这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果 这里在价格数据的地方使用了一个过滤器,通过这个过滤器对价格做了保留小数位的处理. HTML <div class="price"> <span v-html="goods.sale_price|format"></span> <span class="price-before">￥{{＂这里是价格数据＂}}&l
-
php实现的返回数据格式化类实例
本文实例讲述了php实现的返回数据格式化类及其用法,在字符串处理中非常具有实用价值.分享给大家供大家参考.具体方法如下: DataReturn.class.php类文件如下: <?php /** 返回数据格式化类 * Date: 2011-08-15 * Author: fdipzone */ class DataReturn{ // class start private $type; private $xmlroot; private $callback; private $returnDa
-
js时间日期格式化封装函数
js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),来格式化指定时间对象,所以自己就封装了一个小方法,只供大家闲来调侃-.-,有好的建议还望慷慨指荐哦. 用到知识点: arguments:该对象代表正在执行的函数和调用它的函数的参数.不可显式创建,虽然有length属性,且能像数
-
JS处理数据四舍五入(tofixed与round的区别详解)
1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义
-
JS原生数据双向绑定实现代码
代码如下: <span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> fu
-
js方法数据验证的简单实例
实例如下: //input标签只能正数字 <input onkeyup="this.value=this.value.replace(/[^1-9]/g,'')" > //只能输入正整数 function CheckNum(thisobj) { if (thisobj.value == "0") { } else { var firstNum = thisobj.value.toString().substring(0, 1); if (thisobj.
-
使用mock.js随机数据和使用express输出json接口的实现方法
前端项目都会用到后端的接口,但当后台接口没有写好的时候,这时候可以用mock.js先随机生成一些假数据来调试页面 安装mock.js 先用express创建一个nodejs的web项目,名字假如是 demo ,这里就不说了 yarn add mockjs 使用 const Mock = require('mockjs') var data = Mock.mock({ 'list|2': [{ 'id|+1': 1, 'color': '@color()', 'date': '@datetime(
-
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用
-
js实现的格式化数字和金额功能简单示例
本文实例讲述了js实现的格式化数字和金额功能.分享给大家供大家参考,具体如下: 格式化数字,格式化金额: function number_format(number, decimals, dec_point, thousands_sep) { /* * 参数说明: * number:要格式化的数字 * decimals:保留几位小数 * dec_point:小数点符号 * thousands_sep:千分位符号 * */ number = (number + '').replace(/[^0-9