w3h5

JS实现16进制颜色、数字前自动补位0​及详细说明

在项目中可能会有随机16进制颜色或者固定数字长度的需求,可以使用自动补位的方法实现:

语法:

n 代表字符长度, num 代表传入的字符,0 代表补位的字符。

(Array(n).join(0) + num).slice(-n);

实例:

传入一个字符 8 ,字符长度为 3 得到的结果就是 008

console.log(()(Array(3).join(0) + 8).slice(-3)); // 008

可以封装一下:

function PrefixInteger(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

封装后可以直接调用,示例如下:

console.log(PrefixInteger(2, 3)); // 002

详细说明:

Array(6) => 创建了一个长度为 6 的空数组

console.log(Array(6)); // [empty × 6]

Array(6).join(0) => 用 0 拼接,将数组转换成字符串

console.log(Array(6).join(0)); // 00000

Array(6).join(0)+8 => 通过 + ,实现字符串的拼接

console.log(Array(6).join(0)+8); // 000008

(Array(6).join(0) + 8).slice(-8) => slice(startIndex,endIndex) 方法,用于截取


参数说明:

参数是起始位置,含头不含尾。

只有一个参数时,表示从该起始位置一直截取到最后。

参数值为负数时,表示从后往前数,如最后一位,索引是 -1 。

拓展:

slice() 函数用于返回当前字符串中一个连续的片段,该函数属于 String 对象,所有主流浏览器均支持该函数。

语法:

stringObject.slice( startIndex [, endIndex] )

参数描述:

startIndexNumber 类型指向字符串指定部分的开头的索引。

endIndex 可选 Number 类型指向字符串指定部分的结尾的索引(不包括该索引),默认到字符串的结尾。

slice() 函数一直从索引 startIndex 复制到 endIndex 所指示的字符,但是不包括 endIndex 索引上的字符。

如果 startIndex 为负,则将其视为 length + startIndex ,此处 length 为字符串的长度。

如果 endIndex 为负,则将其视为 length + endIndex ,此处 length 为字符串的长度。

如果省略 endIndex ,则将一直提取到字符串的结尾。如果 endIndex 小于等于 startIndex ,则不会复制任何字符,返回空字符串。



声明:本文由w3h5原创,转载请注明出处:《JS实现16进制颜色、数字前自动补位0​及详细说明》 https://www.w3h5.com/post/347.html

赞 (0)
分享到: +More |

评论 沙发

换个身份