toLocaleString---JS数据处理工具函数(转千分位,中文数字等)

介绍

1、toLocaleString 这个方法是JS自带的,无需安装额外插件。该方法支持三种数据类型
  • number.toLocaleString([locales [, options]]):返回这个数字在特定语言环境下的表示字符串
  • array.toLocaleString([locales [, options]]):返回一个字符串表示数组中的元素
  • date.toLocaleString([locales [, options]]):方法返回该日期对象的字符串,该字符串格式因不同语言而不同
    toLocaleString---JS数据处理工具函数(转千分位,中文数字等)_第1张图片

具体使用

1、把阿拉伯数字转成中文数字
 let num = 9
 num.toLocaleString('zh-u-nu-hanidec') // "九"

这个方法虽然方便,但是只支持0-9,若是超过10,则是一〇的结果,若是想要十这个结果,小编封装一个函数给你们使用,如下

let num = 10
 num.toLocaleString('zh-u-nu-hanidec') // "一〇“
let transChinese = (num) => {
    num = Number(num);
    let upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    let length = String(num).length;
    if (length == 1) {
        return upperCaseNumber[num];
    } else if (length == 2) {
        if (num == 10) {
            return upperCaseNumber[num];
        } else if (num > 10 && num < 20) {
            return '十' + upperCaseNumber[String(num).charAt(1)];
        } else {
            return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '');
        }
    }
}
transChinese (99)   // 九十九
2、转成百分比(默认自动省略小数)
var num = 1345.2345
num.toLocaleString('zh',{style:'percent'}) // "134,523%"
num.toLocaleString('zh',{style:'percent' , useGrouping: false}) // "134523%"
num.toLocaleString('zh',{style:'percent' , useGrouping: false}) // "134523%"

minimumIntegerDigits、 minimumFractionDigits 与 maximumFractionDigits
这组属性非常的强大,在某些场合会给我们带来极大的便利。

  • minimumIntegerDigits用来指定使用的整数数字的最小数目.可能的值是从1到21,默认值是1。
  • minimumFractionDigits用来指定使用的小数位数的最小数目.可能的值是从0到20;默认为普通的数字和百分比格式为0。
  • maximumFractionDigits用来指定使用的小数位数的最大数目。可能的值是从0到20。
  const num = 2333.3;
  console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5 }));    //02,333.3
  //如果不想有分隔符,可以指定useGrouping为false
  console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false }));    //02333.3
  console.log(num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false })); //2333.30

  const num2 = 666.666;
  console.log(num2.toLocaleString('zh', { maximumFractionDigits: 2, useGrouping: false }));     //666.67

minimumSignificantDigits 控制使用的有效数字的最小数目。可能的值是从1到21;默认值是1。
maximumSignificantDigits 控制使用的有效数字的最大数量。可能的值是从1到21;

  const num = 1234.5112;
  console.log(num.toLocaleString('zh', { minimumSignificantDigits: 10, useGrouping: false }));      // 1234.511200
  console.log(num.toLocaleString('zh', { maximumSignificantDigits: 10, useGrouping: false }));      //1234.5112
3、数值转千分符
var num =100000111
num.toLocaleString() //  100,000,111


//若是不想要千分符,可将useGrouping属性设为false
var num = 1345.23451
console.log(num.toLocaleString('zh',{style:'percent',useGrouping:false}) ) // 134523%
4.转货币符号
var num = 1234.2345
num.toLocaleString('zh',{style:'currency' , currency:'CNY' }) // "¥1,234.23"
num.toLocaleString('ja',{style:'currency' , currency:'JPY' }) // "¥1,234"
num.toLocaleString('zh',{style:'currency' , currency:'CNY' , useGrouping: false , minimumFractionDigits: 3}) // "¥1234.235"


var arr = [1,22,3333]
arr.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }) // ¥1,¥22,¥3,333

注意:若想保留几位小数或者取消千分符可参考2中属性

5.转换时间显示
var date = new Date()
date.toLocaleString() // "2020/9/28 下午5:14:53"
date.toLocaleString('zh',{ hour12: false }) // "2020/9/28 17:14:53"

当然还有一些不常用的属性,如果需要可参考官方的文档:
https://www.apiref.com/javascript-zh/Reference/Global_Objects/Number/toLocaleString.htm

你可能感兴趣的:(javascript,前端,ecmascript,react,js)