千分位分隔？一个 vue 指令搞定

作者：JYeontu

2024-03-04
广东
本文字数：1876 字
阅读完需：约 6 分钟

说在前面

🎈对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧，常规的做法通常是编写一个工具函数来对数据进行转换，那么我们可不可以通过vue指令来实现这一功能呢？

效果展示

实现原理

非输入框

非输入框我们只需要对其展示进行处理，我们可以判断绑定元素的innerHTML是否不为空，不为空的话则直接对其innerHTML内容进行格式化。

export default {    bind: function (el, binding) {        const separator = binding.value || ",";        if (el.innerHTML) {            el.innerHTML = addThousandSeparator(el.innerText, separator);        }    },};

复制代码

输入框

对于输入框，我们希望其有以下功能：

1、输入的时候去掉分隔符

这里我们只需要监听元素的聚焦(focus)事件即可，取到元素的值，将其分隔符去掉后重新赋值。

el.addEventListener("focus", (event) => {    const value = event.target.value;    event.target.value = deleteThousandSeparator(value, separator);});

复制代码

2、输入完成后添加分隔符

这里我们只需要监听元素的失焦(blur)事件即可，取到元素的值，对其进行添加分隔符处理后重新赋值。

el.addEventListener("blur", (event) => {    const value = event.target.value;    event.target.value = addThousandSeparator(value, separator);});

复制代码

千分位分隔函数

function addThousandSeparator(num, separator = ",") {    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);}

复制代码

num.toString(): 将输入的数字 num 转换为字符串，以便后续处理。
.replace(/\B(?=(\d{3})+(?!\d))/g, separator): 这里使用了正则表达式进行替换操作。具体解释如下：
\B: 表示非单词边界，用于匹配不在单词边界处的位置。
(?=(\d{3})+(?!\d)): 使用正向预查来匹配每三位数字的位置，但不匹配末尾不足三位的数字。
(\d{3})+: 匹配连续的三位数字。
separator: 作为参数传入的分隔符，默认为 ,。
g: 表示全局匹配，即匹配所有满足条件的位置。

这样，通过正则表达式的替换功能，在数字字符串中的每三位数字之间插入指定的千位分隔符，从而实现千位分隔符的添加。

去掉千分位分隔

function deleteThousandSeparator(numberString, separator = ",") {    return numberString.replace(new RegExp(separator, "g"), "");}

复制代码

直接将字符串中的分隔符全部替换为空即可。

完整代码

function addThousandSeparator(num, separator = ",") {    // if (parseFloat(num) + "" !== num + "") return num;    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);}function deleteThousandSeparator(numberString, separator = ",") {    return numberString.replace(new RegExp(separator, "g"), "");}export default {    bind: function (el, binding) {        const separator = binding.value || ",";        if (el.innerHTML) {            el.innerHTML = addThousandSeparator(el.innerText, separator);        }        el.addEventListener("focus", (event) => {            const value = event.target.value;            event.target.value = deleteThousandSeparator(value, separator);        });        el.addEventListener("blur", (event) => {            const value = event.target.value;            event.target.value = addThousandSeparator(value, separator);        });    },};

复制代码

组件库

组件文档

目前该组件也已经收录到我的组件库，组件文档地址如下：http://jyeontu.xyz/jvuewheel/#/JThousandView

组件内容

组件库中还有许多好玩有趣的组件，如：

悬浮按钮
评论组件
词云
瀑布流照片容器
视频动态封面
3D 轮播图
web 桌宠
贡献度面板
拖拽上传
自动补全输入框
图片滑块验证

等等……

组件库源码

组件库已开源到 gitee，有兴趣的也可以到这里看看：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse

觉得有帮助的可以点个 star~

有什么问题或错误可以指出，欢迎 pr~

有什么想要实现的组件或想法可以联系我~

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

发送『组件库』获取源码

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

发布于: 58 分钟前阅读数: 5

原文链接:【http://xie.infoq.cn/article/9a0c91a994b61af730ebf7690】。文章转载请联系作者。

JYeontu

关注

技术~运动~分享公众号：前端也能这么有趣 2023-02-07 加入

喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业两年，三年前端开发经验，做过unity游戏开发，目前担任H5前端开发，算法业余爱好者。公众号：『前端也能这么有趣』

发布

暂无评论

创作场景

千分位分隔？一个 vue 指令搞定

说在前面

效果展示

实现原理

非输入框

输入框

1、输入的时候去掉分隔符

2、输入完成后添加分隔符

千分位分隔函数

去掉千分位分隔

完整代码

组件库

组件文档

组件内容

组件库源码

公众号

说在后面

JYeontu

评论