VUE 常用过滤器方法大全（这么好的文章，还不赶紧收藏，点赞+关注）

最新推荐文章于 2022-05-30 13:23:07 发布

祖先森、

最新推荐文章于 2022-05-30 13:23:07 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_43221910/article/details/123258620

版权

这篇博客介绍了JavaScript中用于处理日期格式化、数字分隔、单词大小写转换以及数值规模表示的过滤器函数。包括将日期从字符串或时间戳转换为不同格式，将数字用逗号分隔，以及将数值转换为K、M、G等表示。还提供了相应的函数实现和示例。

摘要由CSDN通过智能技术生成

1.日期格式化

date = '2022/03/03';
timestamp_1 = 1646298588; // 时间戳 单位秒
timestamp_2 = 1646298835000; // 时间戳 毫秒

{{date | formatDateTime('yyyy-MM-dd')}} // 2022-03-03
{{date | formatDateTime('yyyy年MM月dd日')}} // 2022年03月03日

// 单位秒的时间戳 * 1000 = 毫秒时间戳
{{timestamp_1 * 1000 | formatDateTime('yyyy年MM月dd日')}} // 2022年03月03日
{{timestamp_1 * 1000 | formatDateTime('yyyy-MM-dd hh:mm:ss')}} // 2022-03-03 17:09:48

{{timestamp_2 | formatDateTime('yyyy年MM月dd日')}} // 2022年03月03日
{{timestamp_2 | formatDateTime('yyyy-MM-dd hh:mm:ss')}} // 2022-03-03 17:13:55

{{timestamp_2 | formatDateTime('yyyy小MM中dd大')}} // 2022小03中03大

filters: {
    formatDateTime(time, fmt) {
        if (time == null || time === '') {
            return '暂无';
        }
        let date = new Date(time);
        return formatDate(date, fmt)
    },
}

/**
 * @param {date} date
 * @param {string} fmt
 * @return {string}
 */
export const formatDate = (date, fmt) => {
  var o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds() // 毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
    );
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
    }
  }
  return fmt;
};

2.分隔数字，每隔3位使用逗号进行分隔

value_1 = 123456789.223
value_2 = 254

{{value_1 | toThousandFilter}} // 123,456,789.223
{{value_2 | toThousandFilter}} // 254

/**
 * @param {number} num
 * @return {string} 
 */
export function toThousandFilter(num) {
    if(!num){
        return '';
    }
    return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

3.单词大小写转换

{{'value' | textTransform(0)}} // Value 首字母大写
{{'value' | textTransform(1)}} // VALUE 全大写
{{'VALUE' | textTransform(2)}} // value 全小写

/**
 * @param {String} string
 * @param {number} type
 * @return {string}
 */
export function textTransform(string, type) {
    let json = '';
    switch(type){
        case 0:
        json = string.charAt(0).toUpperCase() + string.slice(1);
            break;
        case 1:
        json = string.toUpperCase();
            break;
        case 2:
        json = string.toLowerCase();
            break;
        default:
        json = string
    }
    return json
}

4.数值格式转换 1000=>1K 1000000 =>1M ...

{{1000 | numberFormatter(2)}} // 1K
{{1040 | numberFormatter(2)}} // 1.04K
{{1000000 | numberFormatter(2)}} // 1M
{{1060000 | numberFormatter(2)}} // 1.06M
{{1000000000 | numberFormatter(2)}} // 1G

/**
 * @param {number} num
 * @param {number} digits
 * @return {string}
 */
export function numberFormatter(num, digits) {
    const si = [
        { value: 1E18, symbol: 'E' },
        { value: 1E15, symbol: 'P' },
        { value: 1E12, symbol: 'T' },
        { value: 1E9, symbol: 'G' },
        { value: 1E6, symbol: 'M' },
        { value: 1E3, symbol: 'k' }
    ]
    for (let i = 0; i < si.length; i++) {
        if (num >= si[i].value) {
            return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
        }
    }
    return num.toString()
}

博主会持续更新过滤器的方法，有小伙伴想要什么处理的过滤器也可告诉我，博主看到会整理的