金额三位间隔

utils/interval.js

export const interval = (value) => {
    if (value) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
}

具体页面使用

html

<view class="gemstone-num">
    <text>宝石数量</text>
	<text>{{ interval(gemstoneNum) }}</u-button>
</view>

js 

import { interval } from '@/utils/interval'

export default {
	data() {
		return {
			gemstoneNum: '10000000', // 宝石数量
		};
	},
	methods: {
		interval(val) {
			return interval(val)
		},
    }
}

正则解释 value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

\B	匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。

\d	匹配一个数字字符。等价于[0-9]。grep 要加上-P，perl正则支持

1、元字符\B

2、先行断言(?=)

3、后行断言(?!\d)

(?:pattern)	非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(
(?=pattern)	非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95
(?!pattern)	非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如“Windows(?!95
(?<=pattern)	非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95
(?<!pattern)	非获取匹配，反向否定预查，与正向否定预查类似，只是方向相反。例如“(?<!95

链接：https://juejin.im/post/6844903609029623815
 

• 我们先把这个表达式的主要结构拆分出来：/\B(?=)/，在这个表达式里面，除了\B以外的部分都不属于匹配结果（matchresult），也就是说，整个表达式里，真正参与最后的匹配到替换成,的是前面的这个\B。
• 如果之前没接触过\B或\b的话可能会疑惑，为什么可以用这个replace给一串数字添加逗号呢，replace不是替换的意思吗，把什么替换掉了？我们先来看一下这个\B元字符所代表的含义。
  我们可能需要先了解一下\B的反面\b所代表的内容：\b代表的是单词边界（Word
  Boundaries）。这里可以先说明一点，它匹配的是一个位置，如同^和$代表字符串的开头和结尾一样。怎样算是字符的边界呢？有以下三种位置可以被称为单词边界：

• • 字符串的第一个字符的前面。如果这个字符是单词字符（word character）的话
  • 字符串的最后一个字符的后面。如果这个字符是单词字符（word character）的话
  • 字符串中两个字符之间，如果其中一个字符是单词字符（word character）而另外一个不是

• 比如\bword\b能让你实现对整个单词的匹配，他并不会匹配到wword1这种字符串。对于上面说到的单词字符（word characte）指的是能组成一个词（word）的字符，如w。而非单词字符（non-word characters）则与之相反，如,和空格。
• 如果还是没看懂可以参考这里（英文）的解释。简而言之，\b匹配的是一个位置，这个位置是一个单词的边界。而我们的\B则与之相反，不属于\b'的位置都可以被\B`匹配到。如本文的主角，一串数字123，他匹配的是1和2，2和3之间的位置，也就是说把这些位置替换为逗号，即可实现我们的千分符。
• 我们拆分后的/\B(?=)/的第二部分(?=)的作用是这样的，举个简单例子：x(?=y)，如果x后面跟的是y，则匹配x。如字符串xyz中的x会被匹配，而后面的y是不会被匹配的。这就是叫做先行断言的东西。如果想了解更多可以参考这里。
• 综合这两点，我们知道我们需要找的是一个位置，这个位置后面跟的东西需要满足一定的条件。现在我们可以假设一下，需要满足什么条件呢？对于我们熟知的千分符来说，当然是从右到左每三位数字添加一个逗号。
• 所以我们的先行断言可以先做这一件事，找寻后面跟了3的倍数个数字的位置，像这样：/\B(?=(\d{3})+)/,新增的部分是(\d{3})+，这里的+号匹配1个或1个以上括号里的内容，也就是三个数字构成的一串字符。对于一串字符12345来说，这个正则表达式匹配1和2，2和3这两位置，因为这两个位置后面都满足跟了3的倍数个数字（234和345）。
• 我们看到已经大概的朝最终目标迈进了。我们只需要去掉一些不合理的位置，比如上面的1和2之间的位置就可以了。
• 上面所说的先行断言保证了每个位置后面有跟了3的倍数个数字，但是没有保证它后面有只跟了3的倍数个数字。比如提到的12345的1和2之间的位置，除了后面跟了满足条件的234以外，还多出来一个5，这不是我们期望的。后行断言就是要解决这个问题。
• 了解了(?=)之后，对于(?!)应该十分好理解，也就是一对反义词。表示后面不能跟相应的内容。比如这里的(?!\d)表示后面不能再跟数字了，比如上面那个多出来的5。稍稍来多点，我们加起来看：(?=(\d{3})+(?!\d))代表的是：后面需要跟3的倍数个数字，且在这（3的倍数个数字）之后不能再有数字了。他可以是小数点.或字符串尾。如12345.67中只有2和3之间的位置满足我们上述的条件。我们只需要指出这个位置，然后将它替换成逗号。