前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS实现16进制颜色、数字前自动补位0​及详细说明

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

作者头像
德顺
发布2019-11-12 21:10:48
3.1K0
发布2019-11-12 21:10:48
举报
文章被收录于专栏:前端资源前端资源

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

语法:

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

代码语言:javascript
复制
(Array(n).join(0) + num).slice(-n);
实例:

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

代码语言:javascript
复制
console.log(()(Array(3).join(0) + 8).slice(-3)); // 008

可以封装一下:

代码语言:javascript
复制
function PrefixInteger(num, n) {
    return (Array(n).join(0) + num).slice(-n);
}

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

代码语言:javascript
复制
console.log(PrefixInteger(2, 3)); // 002
详细说明:

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

代码语言:javascript
复制
console.log(Array(6)); // [empty × 6]

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

代码语言:javascript
复制
console.log(Array(6).join(0)); // 00000

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

代码语言:javascript
复制
console.log(Array(6).join(0)+8); // 000008

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

参数说明:

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

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

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

拓展:

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

语法:

代码语言:javascript
复制
stringObject.slice( startIndex [, endIndex] )

参数描述:

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

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

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

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

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 语法:
  • 实例:
  • 详细说明:
  • 拓展:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档