关于前端:记录一些自己用的前端工具函数

32次阅读

共计 6306 个字符,预计需要花费 16 分钟才能阅读完成。

import _ from 'lodash';
import {toThousands} from '@mx/util/to-thousands';

/**
 * toThousands 千分位格式化
 *
 * ### Example
 * ```
 * const n = '12344.33'
 * toThousands(n); // 12,344.33
 * ```
 */

// 工夫格式化
export function getTimeStr (date) {if (typeof date === 'number') {date = new Date(date);
  }
  let hours = `${date.getHours()}`;
  let minutes = `${date.getMinutes()}`;
  let secodes = `${date.getSeconds()}`;
  if (hours.length < 2) {hours = `0${hours}`;
  }
  if (minutes.length < 2) {minutes = `0${minutes}`;
  }
  if (secodes.length < 2) {secodes = `0${secodes}`;
  }
  return `${hours}:${minutes}:${secodes}`;
}

// 日期格式化
export function getDateStr (date, flag = '-') {if (!date) {return '';}
  if (typeof date === 'number') {date = new Date(date);
  }
  let year = `${date.getFullYear()}`;
  let month = `${date.getMonth() + 1}`;
  let day = `${date.getDate()}`;
  if (month.length < 2) {month = `0${month}`;
  }
  if (day.length < 2) {day = `0${day}`;
  }
  return `${year}${flag}${month}${flag}${day}`;
}

// 综合工夫格式化
export function formatDate (date) {if (!date) {return '--';}
  return `${getDateStr(date)} ${getTimeStr(date)}`;
}

// 数字格局保留指定位小数, 返回字符串格局
export function fixedNumber (num, count = 2) {if (typeof num !== 'number') {num = Number(num);
  }
  return num.toFixed(count);
}

// 金额 分 => 元
export function amountCentToYuan (cent) {if (typeof cent !== 'number' || Number.isNaN(cent)) {return null;}
  return round(cent / 100, 2);
}

// 金额 元 => 分
export function amountYuanToCent (yuan) {if (typeof yuan !== 'number' || Number.isNaN(yuan)) {return null;}
  return round(yuan * 100, 2);
}

// 小数四舍五入
export function round (number, precision) {return Math.round(+number + 'e' + precision) / Math.pow(10, precision);
}

// 千分位格式化,可抉择金额单位为分
export function amountToThousands (amount, isCent = false) {if (!amount && amount !== 0) {return '';}
  if (isCent) {amount = Number.parseFloat(amount) / 100;
  }
  // 产品要强制带小数点两位
  let amountStr = toThousands(`${amount}`);
  if (!amountStr.includes('.')) {amountStr += '.00';} else {
    // 小数点后只有一位的话,还须要补齐
    if (amountStr.split('.')[1].length < 2) {amountStr += '0';}
  }
  return amountStr;
}

// 数字大写格局映射
export function getNumberCap (num) {num = num.trim();
  if (!num) {return '';}
  if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(num)) {return '异样金额';}
  let unit = '千百拾亿千百拾万千百拾元角分';
  let str = '';
  num += '00';
  const p = num.indexOf('.');
  if (p >= 0) {num = num.substring(0, p) + num.substr(p + 1, 2);
  }
  unit = unit.substr(unit.length - num.length);
  for (let i = 0; i < num.length; i++) {str += '零壹贰叁肆伍陆柒捌玖'.charAt(num.charAt(i)) + unit.charAt(i);
  }
  return str.replace(/ 零 ( 千 | 百 | 拾 | 角)/g, '零')
    .replace(/( 零)+/g, '零')
    .replace(/ 零 ( 万 | 亿 | 元)/g, '$1')
    .replace(/( 亿) 万 | 壹 (拾)/g, '$1$2')
    .replace(/^ 元零?| 零分 /g, '')
    .replace(/ 元 $/g, '元整');
}

// 依据正则剔除字符串指定内容,默认剔除非数字
export function replaceByRex (val, rex = /^[0-9]*$/) {if (!val) {return '';}
  return Array.from(val).filter(str => Array.isArray(str.match(rex))).join('');
}

// 剔除字符串中非数字局部并返回
export function replaceNotNum (val) {return replaceByRex(val, /^[0-9]*$/);
}

// 提出字符串中非数字和字母的局部并返回
export function replaceNotNumAndLetter (val) {return replaceByRex(val, /^[0-9a-zA-Z]*$/);
}

// 函数节流,多用于提交接口,默认 2s
export function throttle (fn, wait = 2000) {return _.throttle(fn, wait);
}

// 对象深拷贝
export function deepCopy (obj) {return JSON.parse(JSON.stringify(obj));
}

// 截取字符串中的数字局部并返回,返回值是字符串格局
// 卡号等不太实用,十分大的数字计算会有问题
export function getNumberByString (str, isFloat = false, precision = 2) {str = str.trim();
  if (!str) {return '';}
  const reg = isFloat ? /[0-9.]*/g : /[0-9]*/g;
  const resultArr = str.match(reg);
  let resultStr = '';
  if (Array.isArray(resultArr)) {resultStr = resultArr.join('');
  }
  if (!isFloat) {
    // 为了保险起见,先转成数字再转回来
    return `${Number.parseInt(resultStr)}`;
  } else {
    // 小数可能存在多个小数点存在,小数点也可能在结尾或者结尾,都须要解决
    // 结尾的小数点暂不解决,因为输出小数输一半是必然会通过这一过程的
    if (resultStr.startsWith('.')) {
      // 结尾的小数点会解决成 0.
      resultStr = '0' + resultStr;
    }
    if (resultStr.indexOf('.') !== resultStr.lastIndexOf('.')) {
      // 如果有多个小数点,则第二个小数点及之后的内容将会被舍弃
      const arr = resultStr.split('.');
      resultStr = `${arr[0]}.${arr[1]}`;
    }
    // 小数位数限度
    if (typeof precision === 'number' && precision >= 0) {if (resultStr.includes('.')) {let [int, float] = resultStr.split('.');
        if (float.length > precision) {float = float.substring(0, precision);
        }
        resultStr = `${int}.${float}`;
      }
    }
    // 保险起见,先转成数字再转回来
    // 不过只有有小数点,就可能不实用
    if (resultStr.includes('.')) {return resultStr;}
    return `${Number.parseFloat(resultStr)}`;
  }
}

// 银行卡号展现,开始三位有一个空格,之后每四位会有一空格
export function showBankNo (bankCardNo) {if (!bankCardNo) {return '';}
  let showCardNo = '';
  for (let i = 1; i <= bankCardNo.length; i++) {showCardNo += bankCardNo[i - 1];
    if (i === 3) {showCardNo += ' ';} else if (i > 4) {if ((i % 4) === 0 && i !== bankCardNo.length) {showCardNo += ' ';}
    }
  }
  return showCardNo;
}

function compareNumbers (a, b) {a = Number(a);
  b = Number(b);
  return a === b ? 0
    : a > b ? 1
      : -1;
}

export function formatCommaSeparatedNumbersToNumberArray (v = '') {if (v === null) {return []; }
  let values = v.split(',')
    .map(value => { const num = Number(value); if (num) {return num;} })
    .filter(v => typeof v === 'number')
    .filter(value => {const v = Number(value);
      return v > 0 && Number.isInteger(v);
    });
  if (values.length === 0) {return []; }
  return Array.from(new Set(values)).sort(compareNumbers);
}

export function formatCommaSeparatedNumbersToArray (v = '') {if (v === null) {return []; }
  let values = v.split(',').filter((value = '') => {if (value === '') {return false;}

    const v = Number(value);
    return v > 0 && Number.isInteger(v);
  });
  if (values.length === 0) {return []; }
  return Array.from(new Set(values)).sort(compareNumbers);
}

// 以后环境辨别
export function getEnvRuntime () {if (/\.dev\.sankuai\.com/.test(location.host)) {return 'dev';} else if (/\.test\.sankuai\.com/.test(location.host)) {return 'test';} else if (/\.st\.(sankuai|meituan)\.com/.test(location.host)) {return 'st';} else if (/(promomis-promotion|promo)\.(sankuai|meituan)\.com/.test(location.host)) {return 'prod';} else {return 'local';}
}

// 获取协定模板
export function getAgreementTemplate (no, params) {
  let agreementTemplate = '';
  if (no) {agreementTemplate = require(`client/business/agreements/${no}.html`);
  }
  if (agreementTemplate) {
    // 协定里存在变量,须要别离填充,具体运算规定不在公共办法中解决,而是由内部传入数据决定
    const variable = _.template(agreementTemplate);
    return params ? variable(params) : variable();}
  console.warn(` 协定 ${no} 不存在 `);
  return '没有对应协定';
}

// 递归合并对象, 只合并同级字段
export function meargeObject (base, opt, copyBase = true) {if (!base || typeof base !== 'object') {return opt || {};
  }
  if (copyBase) {base = deepCopy(base);
  }
  if (!opt || typeof opt !== 'object') {return base;}
  // 递归遍历比照,须要依据 typeof 来判断
  for (const [optKey, optVal] of Object.entries(opt)) {
    let val = null;
    for (const [baseKey, baseVal] of Object.entries(base)) {if (baseKey === optKey) {if (Array.isArray(baseVal)) {val = baseVal.concat(optVal);
        } else if (Array.isArray(optVal)) {
          // 这种很奇怪了,原数据不是数组,但新数据是,我就先依照齐全替换解决了
          val = optVal;
        } else if (typeof baseVal === typeof optVal === 'object') {val = meargeObject(baseVal, optVal, false);
        } else {val = optVal;}
      }
    }
    if (!val) {base[optKey] = optVal;
    } else {base[optKey] = val;
    }
  }
  return base;
}

// JS 下载指定 url 文件
export function downFile (url) {const iframe = document.createElement('iframe');
  iframe.src = url;
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
}

正文完
 0