Common methods commonly used at the front end

Keywords: IE

In the first two periods, I have simply encapsulated the Golden Map Tool class that I have learned. In this period, I will put forward some commonly used tool classes as a separate module. In order to facilitate the later collation and everyone's mutual learning.

1. Formatting time

/**
 * @param {(Object|string|number)} time
 * @param {string} TimeFormat   Formats that want to return time such a s'{y} - {m} - {d} {h}: {i}: {s} {a}'{a} are weeks
 * @returns {string}
 */
function parseTime(time, TimeFormat) {
    if (arguments.length === 0) {
        return null
    }
    const format = TimeFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        if (key === 'a') {
            return ['day', 'One', 'Two', 'Three', 'Four', 'Five', 'Six'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

Example of invocation

parseTime('1566458744391')  //The default return format i s'{y} - {m} - {d} {h}: {i}: {s}'2019-08-22 15:25:44.
parseTime('1566458744391','{y}-{m}-{d} {h}:{i}:{s}')  //Fill in the corresponding format 2019-08-22 15:25:44
parseTime('1566458744391','{m}-{d}-{y} {h}:{i}:{s}')  //Modified format 08-22-2019 15:25:44
parseTime('1566458744391','{m}-{d}-{y} {h}:{i}:{s} week{a}')  //Plus Weekly 08-22-2019 15:25:44 Thursday

2. Get the length of the string

/**
 * @param {String} str 
 * @returns {Number}
 */
function byteLength(str) {
    let s = str.length
    for (var i = str.length - 1; i >= 0; i--) {
        const code = str.charCodeAt(i)
        if (code > 0x7f && code <= 0x7ff) s++
        else if (code > 0x7ff && code <= 0xffff) s += 2
        if (code >= 0xDC00 && code <= 0xDFFF) i--
    }
    return s
}

Example of invocation

byteLength('123')  //3
byteLength('Crayon Shin Chan')  //12

3. Array de-weighting

/**
 * @param {Array} arr 
 * @returns {Array}
 */
function uniqueArr(arr) {
    return Array.from(new Set(arr))
}

Example of invocation

uniqueArr([1, 2, 1, 5, 3, 6, 5, 3, 2, 1])  //[ 1, 2, 5, 3, 6 ]

4. Capitalization of string initials

/**   
 * @param {String} string 
 * @returns {String}
 */
function uppercaseFirst(string) {
    return string.charAt(0).toUpperCase() + string.slice(1)
}

Example of invocation

uppercaseFirst('beautiful') //Beautiful

5. Extracting parameters from url addresses

/**
 * @param {String} url 
 * @returns {Object}
 */
function getQueryObject(url) {
    url = url == null ? window.location.href : url
    const search = url.substring(url.lastIndexOf('?') + 1)
    const obj = {}
    const reg = /([^?&=]+)=([^?&=]*)/g
    search.replace(reg, (rs, $1, $2) => {
        const name = decodeURIComponent($1)
        let val = decodeURIComponent($2)
        val = String(val)
        obj[name] = val
        return rs
    })
    return obj
}

Example of invocation

getQueryObject('https://www.com?Tn=monline_3_dg&ie=utf-8&wd=%E5%93%88%E5%93%88%E5%93%93%93%E5%93%93%88%93%88')
// {tn:'monline_3_dg', ie:'utf-8', wd:'haha'}

6. Formatting of Numbers

/**
 * If 10000 = 10K
 * @param {number} num
 * @param {number} digits  digit
 */
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 + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
    }
  }
  return num.toString()
}

Example of invocation

numberFormatter(1001200) //1M
numberFormatter(1001200,3) //1.101M
numberFormatter(1001200,4) //1.1012M

Follow-up will slowly add other methods not involved, I hope you support!

Posted by croix on Tue, 01 Oct 2019 23:44:45 -0700