冷门的toLocaleString

冷门的 toLocaleString

js 里面除了我们日常使用的api以外, 其实还是有不少大多数人都不知道的很好用的api的, toLocaleString 算一个, 也许你在面试题中看到过用正则来实现数字千位用逗号分隔的做法, 但是如果你能直接说出 toLocaleString , 应该是出乎面试官的意料的, 而它的用法可不止于此.

toLocaleString 方法在 Numnber 和 Date 类型上都有部署, 实现的作用都是格式化数字或者日期, 返回格式化后的字符串.

Number.prototype.toLocaleString

api: toLocaleString([locales [, options]])

locales 指定地区, 默认是按照当前电脑环境的语言, 也可以指定不同的语言, 中文是 zh , 英文是 en , 其它可选项请查看 MDN , 不区分大小写.

例如:

const a = -2345679.56789;
const b = new Date();

// 单纯的数字的格式化在 zh 和 en 是相同的
a.toLocalString(); // => "-2,345,679.568"
a.toLocaleString('zh'); // => "-2,345,679.568"
a.toLocaleString('en'); // => "-2,345,679.568"

// 日期的格式化就能看出语言差异了
b.toLocalString(); // => "2019/4/25 上午10:27:15"
b.toLocaleString('zh'); // => "2019/4/25 上午10:27:15"
b.toLocaleString('en'); // => "4/25/2019, 10:27:15 AM"

options 参数才是重头戏, 它可以定义更多的配置项, 但是一定要先指定 locales 参数, 才能使用 options 参数.

options 对象中的 style 表示格式化时使用的格式, 默认是 decimal 即纯数字, 另外还有 percent 百分比和 currency 货币形式, 需要注意的是如果指定 style 为 currency , 那么必须接着指定 currency 属性才行, 因为 currency 没有默认值, 可选值有 CNY 人民币, USD 美元, EUR 欧元等, 更多请参考 MDN

指定了 style 为 currency 之后, 除了 currency 属性之外, 还有一个 currencyDisplay 属性可用, 默认值是 symbol 即货币符号, 另外两个可选值为 code 代码(如 CNY )和 name 名称(如 人民币 )

const c = 80909.89;
c.toLocaleString('zh', {style: 'percent'}); // => "8,090,989%" 
c.toLocaleString('zh', {style: 'currency', currency: 'CNY'}); // => "￥80,909.89"
c.toLocaleString('zh', {style: 'currency', currency: 'CNY', currencyDisplay: 'name'}); // => "80,909.89 人民币"

接下来是 options 里面的两组不能同时使用的参数, 一组是 minimumIntegerDigits , minimumFractionDigits 和 maximumFractionDigits , 另一组是 minimumSignificantDigits 和 maximumSignificantDigits

前一组是用来指定数字的最少整数位数, 最少小数位数和最多小数位数, 后一组用来指定最少数字位数和最多数字位数(包括整数和小数一起). 如果指定了后一组参数, 那么前一组参数就会被忽略掉. 指定位数的规则都是按照四舍五入, 是真正的数学上的四舍五入, 而不是像 toFixed 那样的按照银行家算法的伪四舍五入, 如果位数不足的话就会自动用 0 补齐. 四舍五入 , 自动补齐 , 想想就知道有多大潜力!

另外 style 里面还有一个 useGrouping 参数, 表示是否使用分组分隔符，如千位分隔符或千/万/亿分隔符, 默认为 true

const d = 892839.855;

d.toLocaleString('zh', { style: 'currency', currency: 'CNY' ,minimumFractionDigits: 2, maximumFractionDigits:2 }); // => "￥892,839.86"
d.toLocaleString('zh', { style: 'currency', currency: 'CNY' ,minimumFractionDigits: 2, maximumFractionDigits:2, useGrouping: false }); // => "￥892839.86"

看看上面的金额格式化的示例, 只需要一行语句多简洁啊, 我之前还专门写了个函数来做金额的格式化显示, 跟这个一比差远了...

/**
 * @description: format money to standard string including prefix, separator and two decimal places
 * @param {number | string} currency
 * @param {string} prefix prefix the output with the specified string
 * @return: {string} formated currency
 */
function formatCurrency(currency = '', prefix = '') {
  const split = currency.toString().split('.');
  let integer = split[0] || '0';
  if (integer.startsWith('¥')) {
    integer = integer.slice(1, integer.length);
  }
  let isNegative = false;
  if(integer.startsWith('-')) {
    isNegative = true;
    integer = integer.slice(1, integer.length);
  }
  let decimal = split[1] || '00';
  let output = '';
  while (integer.length > 3) {
    output = `,${integer.slice(-3)}${output}`;
    integer = integer.slice(0, integer.length - 3);
  }
  if (integer) {
    output = integer + output;
  }
  if (decimal.length < 2) {
    decimal = decimal + '0';
  }
  output = `${isNegative ? '-' : ''}${prefix}${output}.${decimal}`;
  return output;
}

Date.prototype.toLocaleString

api: toLocaleString([locales [, options]])

locales 参数与之前的一致, 也是指定语言, 默认是当前电脑环境语言

options 参数就不一样了, 里面的 hour12 表示使用十二小时制还是二十四小时制, 默认值根据当前环境变化而变化

const e = new Date();

e.toLocaleString('zh', {hour12: true}); // => "2019/4/25 下午11:07:32"
e.toLocaleString('zh', {hour12: false}); // => "2019/4/25 23:07:32"

然后是对年月日星期时分秒时区等的显示格式设置, 参数分别是 year , month , day , weekday , hour , minute , second , timeZoneName .

weekday 可选值为 narrow , short 和 long , 就是缩写的长度不同, 例如 Wednesday 依次显示为 W , Wed 和 Wednesday

timeZoneName 可选值为 short 和 long , 例如 GMT+8 和 中国标准时间

其余的参数可选值为 numeric 和 2-digit , 区别是 numeric 直接显示, 2-digit 会固定显示两位数, 例如 7 和 07

month 除了 numeric 和 2-digit 外还有 narrow , short 和 long , 额外的这三个其实也是控制缩写的长度(设置 locales 为 en 能看出差别)