前端rem 配置前端replaceall

转载

mob64ca13ffd0f1 2024-05-31 14:56:58

文章标签 前端rem 配置大数据字符串 bc 正则表达式 文章分类 机器学习人工智能

前言：

刷题过程中遇到要求把数字按照千分位分隔，然后返回字符串，其实在前端开发中经常会遇到这样的一种需求,使用Javascript格式化数字进行输出，本文使用 ES6 的新增方法 replaceAll（）来实现这个需求，题目描述如下

前端rem 配置前端replaceall_大数据

replaceAll()方法

replaceAll（）方法是 replace（）方法的改进版，字符串的实例方法 replace()只能替换第一个匹配，如果要替换所有的匹配，不得不使用正则表达式的 /g修饰符进行全局匹配。但是replaceAll()方法，可以一次性替换所有匹配。（如下）

'aabbcc'.replace('b', '_')
// 'aa_bcc'
'aabbcc'.replace(/b/g, '_')
// 'aa__cc'
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

replaceAll()方法第二个参数

replaceAll()的第二个参数是一个字符串，表示替换的文本，其中可以使用一些特殊字符串。
$&：匹配的字符串。
$` ：匹配结果前面的文本。
$'：匹配结果后面的文本。
$n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
$$：指代美元符号$。

// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'

// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'

// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'

// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'

// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'

正则表达式（先行断言）

说这种方法前，我们来了解下什么是先行断言吧！看例子。

有以下字符串: 我爱你我爱爱爱你

如果要取出爱字，要求这个爱字后面有你，这个时候就要这么写，这就是 先行断言：

'我爱你我爱爱爱你'.match(/爱(?=你)/g) // ["爱", "爱"]

如果要求爱字后面没有你，那自然也有先行否定断言：

'我爱你我爱爱爱你'.match(/爱(?!你)/g) // ["爱", "爱"] ，因为匹配相同...

这个时候，如果要求爱字后面有你，前面还要有我，那就要用到后行断言了，如下：

'我爱你我爱爱爱你'.match(/(?<=我)爱(?=你)/g) // ["爱"]

最后，如果要求爱字前面没有我，后面也没有我，那就要用到先行否定断言和**后行否定断言，**如下：

'我爱你我爱爱爱你'.match(/(?<!我)爱(?!你)/g) // ["爱"]

简单千分位分隔

使用 replaceAll()方法的第二个参数，代码简简单单就一行完成千分位分隔

function _comma(number) {    
                return ((number+'').replaceAll(/\d{1,3}(?=(\d{3})+$)/g,'$&,'))
          }

\d{1,3} 表示匹配 1至3 个数字字符
?=(\d{3})+$ 表示后面匹配三个数字字符 $ 表示从行尾匹配
$& 是 replaceAll()方法的第二个参数，表示与匹配结果一致，$&, 表示匹配结果基础上加上逗号，

小改进（支持小数）

通过添加 三目运算符判 断字符串是否存在小数位，其他逻辑代码不变

// 加入三目运算符判断小数
          function _comma(number) {
             
                return !(number + '').includes('.') 
                ? ((number+'').replaceAll(/\d{1,3}(?=(\d{3})+$)/g,'$&,'))+'' 
                : ((number+'').replaceAll(/\d{1,3}(?=(\d{3})+(\.))/g,'$&,'))+''
            }