关于前端:字符串方法

判断字符串传是否蕴含在另一个字符串中

let s = 'Hello world'

/* 参数字符串是否在原字符串的头部 返回布尔值 */
s.startsWith('Hello'); // true

/* 参数字符串是否在原字符串的尾部 返回布尔值 */
s.endsWith('world');  // true

/* 字符串是否蕴含参数字符串 */
s.includes('w');  // true

startsWith,endsWith,includes都反对第二个参数，示意开始搜寻的地位

let w = '东方不败'

索引从 0 开始

w.startsWith('方',1);  // true
w.endsWith('方',2);   // true

/* includes 第二个参数示意从指定下标开始向后寻找，返回布尔值 */
w.includes('不败',2);  // true
w.includes('不败',3);  // false

repeat()

repeat()办法返回新的字符串，并将原字符串反复 n 次

 let a = 'hello'
a.repeat(3);   // hellohellohello 反复 3 次
'w'.repeat(2);  // ww 反复 2 次
a.repeat(0);  // ""  字符串置空
a.repeat(2.7); // 如果是小数则取整  反复 2 次

如果是正数或者 Infinity 则报错

let a = 'hello'
a.repeat(Infinity);   // 报错
a.repeat(-1);  // 报错

let a = 'hello'
a.repeat(-0.9); // 如果参数是 0~- 1 之间的小数，因为会取整，所以是 0 ""a.repeat(NaN);  // 参数是 NaN 等于 0""
a.repeat('he');  // ""  如果参数是字符串则输入空值
a.repeat('2'); // 参数如果是字符串，会先转换数字

padStart() padEnd() 字符串补全

padStart() 头部补全
padEnd() 尾部补全

let b = 'how'
b.padStart(5,'aa'); // 字符串长度补到 5 位，在 how 头部补全 aa
b.padStart(5,'aba'); // 字符串长度补到 5 位，在 how 头部补全 ab，补全的字符串超出会被截取
b.padEnd(5,'aa');  // 字符串长度补到 5 位，在 how 尾部补全 aa
b.padEnd(5,'aba'); // 字符串长度补到 5 位，在 how 尾部补全 ab，补全的字符串超出会被截取
b.padStart(5);  // 如果省略第二个参数则用空格代替  "how"
b.padEnd(5);  // 如果省略第二个参数则用空格代替  "how"

padStart常见的应用场景：

'1'.padStart(5,'0');  // 补全数字  00001

'09-12'.padStart(10,'YYYY-MM-DD');  // 提醒字符串格局 YYYY-09-12，将 YYYY-MM-DD 补全到 09-12 头部，保留 10 位字符，残余的截取掉

打消字符串空格

let s = 'abc'
s.trim();  // 打消首尾空格   'abc'
s.trimStart();  // 打消头部空格  'abc'
s.trimEnd();  // 打消尾部空格 'abc'

replaceAll()

在 es6 之前，replace的字符串替换只能替换匹配的一个，如果字符串中有多个字符匹配，只替换第一个，批量匹配则须要在匹配的前面加上 g

个别应用的replace() 只能替换第一个匹配的字符

'hello'.replace('l','o');  // heolo  只替换了第一个

如果要匹配所有，就须要应用正则表达式的 g 修饰符

'hello'.replace(/l/g,'o');  // heooo  替换所有

在此基础上，这里提供了一个更加不便的办法，es2021引入了replaceAll(), 能够匹配所有并替换

let r = 'green'
r.replaceAll('e','n');  // grnnn  匹配所有 e 替换为 n
console.log(r);  // green  // 后面的替换不会影响原字符

须要留神的是，replace 和 replaceAll()会返回新的字符，不会影响原字符

console.log('hello'.replaceAll(/l/,'o'));   // 报错

replaceAll()为替换所有，如果在第一个参数中应用正则表达式，须要 /g，g 为全局，否则报错

replaceAll()非凡字符串

replaceAll()接管 两个参数，第二个参数能够是字符串，在字符串的根底上，这里提供了一些非凡字符串

'hello'.replaceAll('e', '$&'); // hello 返回后果与原字符统一

'hello'.replaceAll('l', '$`'); // hehehelo 将 l 替换成 l 后面的字符，这里有两个 l, 第一个 l 被替换成 he，第二个 l 被替换成 hehe

'hello'.replaceAll('l', `$'`); // helooo 将 l 替换成 l 前面的字符，这里有两个 l, 第一个 l 被替换成 lo，第二个 l 被替换成 o'hello'.replaceAll(/(he)(llo)/g,'$2$1') //llohe $ 前面的 x 就是第几个匹配，$2 等于 llo $1 等于 el，这里相当于是吧 llo 放到了后面，he 放到了前面, 这种匹配形式必须是字符串的等长匹配，如果是 /(he)(lo)/g,'$2$1' 不会失效，因为匹配的字符串长度与原字符串长度不符。

replaceAll()组和函数匹配

replaceAll()的第二个参数能够是一个函数

'hello'.replaceAll('l', () => 'o'); // heooo 替换所有的 l 为 o 

既然 replaceAll() 的第二个参数能够是一个函数，那么就能够在这个函数上做其它操作，咱们能够在参数匹配的条件上做函数操作，这里演示一下组和函数匹配

let str = '123hello456'
let regex = /(\d+)([a-z]+)(\d+)/g // 有三个组，组 1 匹配数字，组 2 匹配字母，组 3 匹配数字

// all 为传入的字符串 123hello456，z1\z2\z3 为对应的组也就是 regex 内的(\d+)、([a-z]+)、(\d+)
function replacer(all, z1, z2, z3, offset, string) {return [z1, z2, z3].join('-') // 将匹配的内容用 - 连贯
        }
        
let re = str.replaceAll(regex, replacer)
console.log(re); //123-hello-456

这个 替换函数 能够承受 多个参数。第一个参数是捕捉到的匹配内容，第二个参数捕捉到是组匹配（有多少个组匹配，就有多少个对应的参数）。此外，最初还能够增加两个参数，倒数第二个参数是捕捉到的内容在整个字符串中的地位，最初一个参数是原字符串。

at

依据 at 的下标来匹配输入。
at参数为 负数 时，从字符串的 头部 开始，起始值是 0
at 为正数 时，从字符串的 开端 开始，起始值是1

'hello'.at(2); // 输入 l 字符串中第 0 位开始，输入下标 2 的字符

'hello'.at(-1); // 输入 o, 从开端开始，第 1 位开始，输入下标 1 的字符

案例源码：https://gitee.com/wang_fan_w/es6-science-institute

如果感觉这篇文章对你有帮忙，欢送点亮一下 star 哟