Loading... ## 前言 这篇文章是分享在JavaScript中的一些常见方法，比如说格式化时间、获取url参数、产生指定区间随机数等等。🎯 ## 获取URL请求参数 此方法可用于获取url请求参数的值，如果没有该参数，则返回false ```javascript /** * @description 获取URL请求参数 * @param {string} variable url参数名 * @returns {string} 参数对应的值 */ function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } ``` ## 数字格式化 此方法可用于对数值形式的金额进行格式化 ```javascript /** * @description 数字格式化 * @param {number|string} number 要格式化的数字 * @param {number} decimals 保留几位小数 * @param {string} decimalPoint 小数点符号 * @param {string} thousandsSeparator 千分位符号 * @returns {string} 格式化后的数字 */ function priceFormat(number, decimals = 0, decimalPoint = '.', thousandsSeparator = ',') { number = (`${number}`).replace(/[^0-9+-Ee.]/g, '') const n = !isFinite(+number) ? 0 : +number const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals) const sep = (typeof thousandsSeparator === 'undefined') ? ',' : thousandsSeparator const dec = (typeof decimalPoint === 'undefined') ? '.' : decimalPoint let s = '' const toFixedFix = function (n, prec) { const k = 10 ** prec return `${Math.ceil(n * k) / k}` } s = (prec ? toFixedFix(n, prec) : `${Math.round(n)}`).split('.') const re = /(-?\d+)(\d{3})/ while (re.test(s[0])) { s[0] = s[0].replace(re, `$1${sep}$2`) } if ((s[1] || '').length < prec) { s[1] = s[1] || '' s[1] += new Array(prec - s[1].length + 1).join('0') } return s.join(dec) } ``` ## 对象转URL参数 该方法，可以将一个对象形式参数转换成`get`传参所需参数形式，如把`{name: 'lisa', age: 20}`转换成`?name=lisa&age=20` ```javascript /** * @description 对象转url参数 * @param {object} data,对象 * @param {Boolean} isPrefix,是否自动加上"?" * @param {string} arrayFormat 规则 indices|brackets|repeat|comma */ function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') { const prefix = isPrefix ? '?' : '' const _result = [] if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets' for (const key in data) { const value = data[key] // 去掉为空的参数 if (['', undefined, null].indexOf(value) >= 0) { continue } // 如果值为数组，另行处理 if (value.constructor === Array) { // e.g. {ids: [1, 2, 3]} switch (arrayFormat) { case 'indices': // 结果: ids[0]=1&ids[1]=2&ids[2]=3 for (let i = 0; i < value.length; i++) { _result.push(`${key}[${i}]=${value[i]}`) } break case 'brackets': // 结果: ids[]=1&ids[]=2&ids[]=3 value.forEach((_value) => { _result.push(`${key}[]=${_value}`) }) break case 'repeat': // 结果: ids=1&ids=2&ids=3 value.forEach((_value) => { _result.push(`${key}=${_value}`) }) break case 'comma': // 结果: ids=1,2,3 let commaStr = '' value.forEach((_value) => { commaStr += (commaStr ? ',' : '') + _value }) _result.push(`${key}=${commaStr}`) break default: value.forEach((_value) => { _result.push(`${key}[]=${_value}`) }) } } else { _result.push(`${key}=${value}`) } } return _result.length ? prefix + _result.join('&') : '' } ``` ## 去除空格 该方法可以去除空格，分别可以去除所有空格，两端空格，左边空格，右边空格，默认为去除两端空格 ```javascript /** * @description 去除空格 * @param String str 需要去除空格的字符串 * @param String pos both(左右)|left|right|all 默认both */ function trim(str, pos = 'both') { str = String(str) if (pos == 'both') { return str.replace(/^\s+|\s+$/g, '') } if (pos == 'left') { return str.replace(/^\s*/, '') } if (pos == 'right') { return str.replace(/(\s*$)/g, '') } if (pos == 'all') { return str.replace(/\s+/g, '') } return str } ``` ## 返回多久以前 该函数必须传入第一个参数(支持任何合法的时间格式、`秒`或`毫秒`的时间戳)，第二个参数是可选的，返回的值类似`刚刚`，`25分钟前`，`3小时前`，`7天前`的结果。 如果第二个参数是时间的格式，当前和传入时间戳相差大于一个月时，返回格式化好的时间；如果第二个参数为`false`，则不会返回格式化好的时间，而是诸如"xxx年前"的结果。 ```javascript /** * @description 时间戳转为多久之前 * @param {String|Number} timestamp 时间戳 * @param {String|Boolean} format * 格式化规则如果为时间格式字符串，超出一定时间范围，返回固定的时间格式； * 如果为布尔值false，无论什么时间，都返回多久以前的格式 * @returns {string} 转化后的内容 */ function timeFrom(timestamp = null, format = 'yyyy-mm-dd') { if (timestamp == null) timestamp = Number(new Date()) timestamp = parseInt(timestamp) // 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位) if (timestamp.toString().length == 10) timestamp *= 1000 let timer = (new Date()).getTime() - timestamp timer = parseInt(timer / 1000) // 如果小于5分钟,则返回"刚刚",其他以此类推 let tips = '' switch (true) { case timer < 300: tips = '刚刚' break case timer >= 300 && timer < 3600: tips = `${parseInt(timer / 60)}分钟前` break case timer >= 3600 && timer < 86400: tips = `${parseInt(timer / 3600)}小时前` break case timer >= 86400 && timer < 2592000: tips = `${parseInt(timer / 86400)}天前` break default: // 如果format为false，则无论什么时间戳，都显示xx之前 if (format === false) { if (timer >= 2592000 && timer < 365 * 86400) { tips = `${parseInt(timer / (86400 * 30))}个月前` } else { tips = `${parseInt(timer / (86400 * 365))}年前` } } else { tips = timeFormat(timestamp, format) } } return tips } ``` ## 格式化时间 该函数必须传入第一个参数(支持任何合法的时间格式、`秒`或`毫秒`的时间戳)，第二个参数是可选的，函数返回一个格式化好的时间。 ```javascript /** * @description 格式化时间 * @param {String|Number} dateTime 需要格式化的时间戳 * @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd * @returns {string} 返回格式化后的字符串 */ function timeFormat(dateTime = null, fmt = 'yyyy-mm-dd') { // 如果为null,则格式化当前时间 if (!dateTime) dateTime = Number(new Date()) // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式 if (dateTime.toString().length == 10) dateTime *= 1000 const date = new Date(dateTime) let ret const opt = { 'y+': date.getFullYear().toString(), // 年 'm+': (date.getMonth() + 1).toString(), // 月 'd+': date.getDate().toString(), // 日 'h+': date.getHours().toString(), // 时 'M+': date.getMinutes().toString(), // 分 's+': date.getSeconds().toString() // 秒 // 有其他格式化字符需求可以继续添加，必须转化成字符串 } for (const k in opt) { ret = new RegExp(`(${k})`).exec(fmt) if (ret) { fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0'))) } } return fmt; } // 调用案例 let date = timeFormat(new Date(),"yyyy-mm-dd hh:MM:ss"); //返回当前时间 ``` ## 数组顺序打乱 该函数可以打乱一维数组元素的顺序，这是随机过程 ```javascript /** * @description 打乱数组 * @param {array} array 需要打乱的数组 * @returns {array} 打乱后的数组 */ function randomArray(array = []) { // 原理是sort排序,Math.random()产生0<= x < 1之间的数,会导致x-0.05大于或者小于0 return array.sort(() => Math.random() - 0.5) } ``` ## 获取全局唯一标识符GUID 该函数可以生产一个全局唯一、随机的guid，默认首字母为`u`，可以用于当做元素的id或者class名等需要唯一，随机字符串的地方，因为id或者class不能以数字开头。 ```javascript /** * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85 * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题 * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱 * v-for的时候,推荐使用后端返回的id而不是循环的index * @param {Number} len uuid的长度 * @param {Boolean} firstU 将返回的首字母置为"u" * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制 */ function guid(len = 32, firstU = true, radix = null) { const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('') const uuid = [] radix = radix || chars.length if (len) { // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位 for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix] } else { let r // rfc4122标准要求返回的uuid中,某些位为固定的字符 uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-' uuid[14] = '4' for (let i = 0; i < 36; i++) { if (!uuid[i]) { r = 0 | Math.random() * 16 uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r] } } } // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class if (firstU) { uuid.shift() return `u${uuid.join('')}` } return uuid.join('') } ``` ## 参数指定区间随机数 该方法可以返回在"min"和"max"之间的数值，要求"min"和"max"都为数值，且"max"大于或等于"min"，否则返回0. ```javascript /** * @description 取一个区间数 * @param {Number} min 最小值 * @param {Number} max 最大值 */ function random(min, max) { if (min >= 0 && max > 0 && max >= min) { const gab = max - min + 1 return Math.floor(Math.random() * gab + min) } return 0 } // 使用案例 let res = random(0,100); //返回0~100之间的随机数 ``` ## 延时阻塞调用 延时一定时间进行回调，类似于`promise`的使用方式 ```javascript /** * @description 进行延时，以达到可以简写代码的目的 * @param {number} value 堵塞时间 单位ms 毫秒 * @returns {Promise} 返回promise */ function sleep(value = 30) { return new Promise((resolve) => { setTimeout(() => { resolve() }, value) }) } // 使用案例 sleep(200).then(()=>{ console.log("200毫秒之后,执行此代码"); }); ``` ## 推荐使用工具类 我们在项目中可以创建一个通用的工具类，这样的话，我们就可以反复使用。工具类已经写好了，大家可以按需下载。 下载地址(点击打开Ctrl+S即可保存)： <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div> 使用方式： ```html <!-- 导入工具类 --> <script src="js/util.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 使用工具类中的方法 console.log(util.random(1,300)) </script> ``` 最后修改：2021 年 12 月 30 日 © 允许规范转载 赞 都滑到这里了，不点赞再走！？
2 条评论
1
1