JS格式化数字1234567890 –> 1,234,567,890

  • A+
所属分类:Web前端
摘要

优点:自我感觉比网上写的一堆 for循环 还有 if-else 判断的逻辑更加清晰直白。
缺点:太普通


数字格式化 1234567890 --> 1,234,567,890

1.普通版

function formatNumber(str) {   let arr = [],     count = str.length    while (count >= 3) {     arr.unshift(str.slice(count - 3, count))     count -= 3   }    // 如果是不是3的倍数就另外追加到上去   str.length % 3 && arr.unshift(str.slice(0, str.length % 3))    return arr.toString()  } console.log(formatNumber("1234567890")) // 1,234,567,890 

优点:自我感觉比网上写的一堆 for循环 还有 if-else 判断的逻辑更加清晰直白。
缺点:太普通

2.进阶版

function formatNumber(str) {    // ["0", "9", "8", "7", "6", "5", "4", "3", "2", "1"]   return str.split("").reverse().reduce((prev, next, index) => {     return ((index % 3) ? next : (next + ',')) + prev   }) }  console.log(formatNumber("1234567890")) // 1,234,567,890 

优点:把 JS 的 API 玩的了如指掌
缺点:可能没那么好懂,不过读懂之后就会发出我怎么没想到的感觉

3.正则版

function formatNumber(str) {   return str.replace(/B(?=(d{3})+(?!d))/g, ',') }  console.log(formatNumber("123456789")) // 1,234,567,890 

下面简单分析下正则/B(?=(d{3})+(?!d))/g

第一 /B(?=(d{3})+(?!d))/g:正则匹配边界B,边界后面必须跟着(d{3})+(?!d); 第二 (d{3})+:必须是1个或多个的3个连续数字; 第三 (?!d):第2步中的3个数字不允许后面跟着数字; 第四 (d{3})+(?!d):所以匹配的边界后面必须跟着3*n(n>=1)的数字。 

最终把匹配到的所有边界换成,即可达成目标。

优点:代码少,浓缩的就是精华
缺点:需要对正则表达式的位置匹配有一个较深的认识,门槛大一点

4.API版

(123456789).toLocaleString('en-US')  // 1,234,567,890 

你可能还不知道 JavaScripttoLocaleString 还可以这么玩。

还可以使用 Intl对象 - MDN

Intl 对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比,数字格式化,日期和时间格式化。Collator,NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。

new Intl.NumberFormat().format(1234567890) // 1,234,567,890 

优点:简单粗暴,直接调用 API
缺点:Intl兼容性不太好,不过 toLocaleString的话 IE6 都支持

你可能不知道的前端知识点:Intl对象 和 toLocaleString的方法。

站在巨人肩膀上摘苹果

https://github.com/jawil/blog/issues/30