美文网首页前端大杂烩
如何在 JavaScript 中添加千位逗号(每三位数)

如何在 JavaScript 中添加千位逗号(每三位数)

作者: lio_zero | 来源:发表于2021-06-11 23:54 被阅读0次

    这几天整理的一下过往的文章和笔记,备份到了 Github 上,地址👉 blog

    如果我的内容帮助到了您,欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~ 👆


    今天讲一个常见的场景:在你输入金额时,每三位数自动添加一个逗号。你可能需要对一段长数字进行一些基本的数字格式化。

    转换如下:

    • 100 —> 100
    • 1000 —> 1,000
    • 1000000 —> 1,000,000

    有三种相当简单的方法可以在 JavaScript 中执行此操作。

    toLocaleString()

    toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。

    const addCommas = num => num.toLocaleString()
    
    addCommas(100) // "100"
    addCommas(1000) // "1,000"
    addCommas(1000000) // "1,000,000"
    

    Intl.NumberFormat

    Intl.NumberFormat 是对语言敏感的格式化数字类的构造器类。

    const number = 123456.789
    
    console.log(new Intl.NumberFormat('de-DE').format(number)) // 123.456,789
    console.log(new Intl.NumberFormat('ja-JP').format(number)) // 123,456.789
    console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)) // 1,23,000
    

    正则表达式

    另一种选择是使用正则表达式。如果我们的输入是数字,我们将需要确保在应用正则表达式之前将其隐式转换为字符串。

    const addCommas = (num) => num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    
    addCommas(100) // "100"
    addCommas(1000) // "1,000"
    addCommas(1000000) // "1,000,000"
    

    相关文章

      网友评论

        本文标题:如何在 JavaScript 中添加千位逗号(每三位数)

        本文链接:https://www.haomeiwen.com/subject/kijbeltx.html