ES6查漏补缺【字符串的扩展】

我的ES6

前言:新年伊始,重走ES6之字符串的扩展。

字符串的扩展

注意:字符串所有的(实例)方法都不改变原字符串

1.repeat(num)

作用:把字符串重复指定的次数返回

// main.js
let str = '我是一个实例'
console.log(str.repeat(2))
console.log(str.repeat(3.9))
console.log(str)

ES6查漏补缺【字符串的扩展】

2.startsWith(str,[]startIndex = 0)

作用:判断字符串是否以某个字符串开头,如果是,返回true;否则返回false

// main.js
let str = 'http://127.0.0.1:8080'
console.log(str.startsWith('http'))
console.log(str.startsWith('http', 1))

ES6查漏补缺【字符串的扩展】

3.endsWith(str,[endIndex = str.length - 1])

作用:判断字符串是否以某个字符串结尾,如果是,返回true;否则返回false

// main.js
let str = 'http://127.0.0.1:8080'
console.log(str.endsWith(':8080'))
console.log(str.startsWith(':808'))

ES6查漏补缺【字符串的扩展】

4.includes(str,[startIndex] = 0)

作用:判断字符串是否包含某个字符串,如果包含则返回true,否则返回false,他可以取代indexOf方法,因为includes更具有语义化

// main.js
let str = 'China,YYDS'
console.log(str.includes('h')) // true
console.log(str.includes('h', 0)) // true
console.log(str.includes('h', 3)) // false

ES6查漏补缺【字符串的扩展】

5.padStart(length,str)

作用: 字符串头部填充,返回填充后的字符串

const str = "头部填充";
console.log(str.padStart(10,"字符串")); // 字符串字符串头部填充
console.log(str.padStart(3,"字符串")); // 头部填充

6.padEnd(length,str)

作用: 字符串尾部填充,返回填充后的字符串

const str = "尾部填充";
console.log(str.padStart(6,"字符串")); // 尾部填充字符
console.log(str.padStart(9,"字符串")); // 尾部填充字符串字符

7.trimStart() or trimEnd()

作用:去除字符串的头部空格并返回 or 去除字符串的尾部空格并返回

const str = '  去除 空格 ';
console.log(str.trimStart()) // 去除 空格 
console.log(str.trimEnd()) //   去除 空格
console.log(str.trim()) // 去除 空格

8.replaceAll

作用:字符串全局替换replace(searchValue | searchPattern, replacement)

const str = “Shui,Di,Shi,Chuan”;

1.两个参数都是字符串
console.log(str.replaceAll(‘S’,‘只’));// 只hui,Di,只hi,Chuan

2.第一个参数是正则,第二个参数是字符串
console.log(str.replaceAll(/S/g,‘只’));// 只hui,Di,只hi,Chuan

3.第一个参数是正则,第二个参数是回调函数

回掉函数参数

  • 第一个:符合正则规则的字符串
  • 第二个:在原字符中的下标(位置)
  • 第三个:原字符串本身
const ret = str.replaceAll(/S/g,function(match, index, str){
	console.log(match, index, str) // S 0 Shui,Di,Shi,Chuan
	console.log(match, index, str) // S 9 Shui,Di,Shi,Chuan
	return '知知'
}
console.log(ret) //知知hui,Di,知知hi,Chuan

9.字符串方法,解决几个需求

  • 对一个个位数进行补零操作, 12 => ‘12’, 9 => ‘09’
  • 把字符串str = ’ 去除 空格 '的空格全部去掉
  • 脏话过滤,str = ‘TMD,我服了,这tmd的真是个SB’ => ‘***,我服了,这*的真是个
// - 对一个个位数进行补零操作, 12 => '12', 9 => '09'
function padZero(str1) {
    return String(str1).padStart(2, '0')
}
console.log(padZero(12)) // 12
console.log(padZero(9)) // 09

// - 把字符串str =  '  去除 空格 '的空格全部去掉
function removeAllSpace(str2) {
    return str2.replaceAll(' ', '')
}
let str2 = '  去除 空格 '
console.log(removeAllSpace(str2)) // 去除空格

// - 脏话过滤,str = 'TMD,我服了,这tmd的真是个SB' => '***,我服了,这***的真是个**'
let zang = 'TMD,我服了,这tmd的真是个SB'
function clearZang(zang) {
    let red = zang.replaceAll(/(TMD|SB)+/ig, function (match, index, item) {
        return '*'.repeat(match.length)
    })
    return red
}
console.log(clearZang(zang)) // ***,我服了,这***的真是个**

ES6查漏补缺【字符串的扩展】

相关资料


  • https://es6.ruanyifeng.com/
  • https://space.bilibili.com/510273162?spm_id_from=333.788.b_765f7570696e666f.2
上一篇:配置练习ES6的项目环境【Webpack】


下一篇:英文写作盲点