javascript中对数据文本格式化的思考_0

忘是亡心i 2022-07-11 12:29 55阅读 0赞

在实际应用场景中，我们常常需将一些数据输出成更加符合人类习惯阅读的格式。

## 保留小数点后面两位 ##

在一些要求精度没有那么准确的场景下，我们可以直接通过`Number.prototype.toFixed()`来实现保留小数点两位这样的需求。

var num = 123.45678
    console.log(num.toFixed(2)) //123.46
    
    var num2 = 12
    console.log(num2.toFixed(2)) //12.00

不过如果恰好，数字是一个整数，那么就会输出`12.00`这样的格式，我们常常对于后面为`00`的整数要求直接输出整数即可。因此不妨这样写。

var num = 123.45678
    console.log(num.toFixed(2).replace('.00', '')) //123.46
    
    var num2 = 12
    console.log(num2.toFixed(2).replace('.00', '')) //12

在`toFixed()`后面直接接着`replace()`将整数才会出现的`.00`字符串替换掉即可。

ps: `Number.prototype.toFixed`返回的是一个字符串

## 数字为\[0-9\]的情况下，前置补0 ##

在输出某些数字的时候下，如果是小于**10**的情况下需要在前面补**0**，尤其是在输出日期时间的时候。

以前在用`Date`对象去获取到相关的时间数据的时候去判断是否小于**10**，如果是就补**0**。

var date = new Date()
    var min = date.getMinutes()
    min = min < 10 ? '0' + min : min
    console.log(min) //08

后来觉得实在不够优雅，而且代码繁多，就想到用字符串替换的方式。

var date = new Date()
    var min = String(date.getMinutes()).replace(/^(\d{1})$/, '0$1')
    console.log(min) //08

这样利用正则去匹配到单数字的情况下直接在前面加上**0**即可，一行代码，更加优雅。

再继续衍生下去，我基本上都是在日期格式化的时候需要做数字替换，何不直接整个字符串替换即可？比如将`2017-1-8 12:8`替换成`2017-01-08 12:08`。

var date = '2017-1-8 12:8'.replace(/\b\d{1}\b/g, '0$&')
    console.log(date)

通过正则去做整个字符串替换，不再针对性的针对某些部分做处理了。 最后给出完整的格式化日期函数示例。

function formatDate (source, format) { 
      var date = new Date();
      format = format || 'yyyy-MM-dd hh:mm';
      if (typeof source == 'string') format = source;
      if (typeof source == 'number') date = new Date(source);
      
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let miniute = date.getMinutes();
      let second = date.getSeconds();
      return format.replace('yyyy', year)
                .replace('MM', month)
                .replace('dd', day)
                .replace('hh', hour)
                .replace('mm', miniute)
                .replace('ss', second)
                .replace(/\b\d{1}\b/g, '0$&');
      return date;
    }

>     上面列举的所有代码，都没有考察对比过执行效率，因为在这些应用场景下，效率是其次问题。