ES6+ 字符串方法扩展

2021-04-12 | 2024-06-30 | 1.7k | 6 分钟

includes()

includes() 方法主要用于查询字符串，判断一个字符串是否包含另外一个字符串，其返回值是如果包含该字符串则返回 true 否则返回 false；

在使用 includes() 时需要注意类型转换的一些问题：

includes 会做类型转换；

不能对 Number 类型直接使用；

区分大小写：includes() 方法是区分大小写的；

'ricepudding es6'.includes('ricepudding');  // true
'ricepudding es6'.includes('RICEPUDDING');  // false

一个参数：includes() 在只有一个参数时，会从字符串的第一个字符开始查找；

var str = "I love ricepudding.";

console.log(str.includes("I love"));    // true
console.log(str.includes("ricepudding"));     // true
console.log(str.includes("ericepudding"));    // false

两个参数：当 includes() 有第二个参数的时候，会从第二个参数作为索引的位置开始；

var str = "I love ricepudding.";

console.log(str.includes("love", 3));  // false
console.log(str.includes("ove", 3));   // true

startsWith()

startsWith() 用于判断一个字符串，是否以一个指定字符串为起始的，如果是字符串的开头找到了给定的字符则返回 true，否则返回 false；

在查询字符串中的开头时可以使用 startsWith 或者 includes()，在字符串少的情况下，它们的效率基本没有差别，但是如果在查询以某字符串开头的时候，使用 startsWith 会很有语义化，利于代码阅读；

一个参数

var str = "I love china.";

console.log(str.startsWith("I love"));    // true
console.log(str.startsWith("china"));     // false
console.log(str.startsWith("echina"));    // false

两个参数

var str = "I love china.";

console.log(str.startsWith("love", 3));   // false
console.log(str.startsWith("ove", 3));    // true

endsWith()

endsWith() 用于判断当前字符串，是否以一个指定字符串为结尾的，如果在字符串的结尾找到了给定的字符则返回 true，否则返回 false；

在查询字符串中的结尾时最好使用 endsWith 进行查询，它的效率要比 includes() 高，而且 endsWith 也具有语义化；

没有参数：没有传参时，默认使用 undefined 来填充

var str = "I love china.";
console.log(str.endsWith());   // false
console.log(str.endsWith(undefined));	// false

一个参数

var str = "I love china.";

console.log(str.endsWith("I love"));    // false
console.log(str.endsWith("china"));     // false
console.log(str.endsWith("china."));    // true
console.log(str.endsWith(""));    			// true

两个参数

var str = "I love china.";

console.log(str.endsWith("love", 6));   // true
console.log(str.endsWith("e", 6));      // true

repeat()

该方法构造并返回一个新字符串，表示将原字符串重复 n 次，并不会改变原字符串，可以通过这个方法拷贝一个相同的字符串；

取代循环拼接多个相同的字符串，会比使用 for 循环优雅，方便；

repeat() 方法的使用，需要注意以下几点：

重复次数不能为负数；

重复次数必须小于 infinity，且长度不会大于最长的字符串；

参数是小数：参数如果是小数，会被取整；
```
"china".repeat(2.6)    // "chinachina" 
```

负数和 Infinity：repeat 的参数是负数或者 Infinity，会报错；

'china'.repeat(Infinity)  // RangeError
"china".repeat(-1)        // 无效的数字

0～1 和 0～- 1：参数是 0 到 - 1 或 0 到 1 都会先进行取整运算，所以在这两个范围内都会被 repeat 视同为 0；
```
'china'.repeat(0.9)   // ''
"china".repeat(-0.8)  // ''
```
参数 NaN 等同于 0；
```
'china'.repeat(NaN)   // ''
```

参数是字符串：参数是字符串，则会先转换成数字；

'china'.repeat('two')   // ''
'china'.repeat('2')     // 'chinachina'

padStart()

padStart() 在原字符串开头填充指定的填充字符串直到目标长度并返回一个新的字符串，不会对原字符串进行修改；

padStart() 方法的使用，需要注意以下几点：

该方法不会对原字符串进行修改；

在没有第二个参数时，则用空格填充；

在实战中使用在日期前的补充会使代码变得非常简洁；

拼接字符串

"china".padStart(10, 'ilove')    // "ilovechina"

如果原字符串的长度，等于或小于最大长度，则字符串补全不生效，返回原字符串；
```
'china'.padStart(5, 'ab') // 'china'
'china'.padEnd(2, 'ab') // 'china'
```
如果补全的字符串和原字符串的长度大于目标 （targetLength） 的长度，补全的字符串会被截取；
```
'china'.padStart(7, 'abc') // 'abchina'
```
如果补全的字符串和原字符串的长度小于目标 （targetLength） 的长度，补全的字符串会被重复，多余的部分会被裁剪；
```
'china'.padStart(9, 'ab') // 'ababchina'
'china'.padStart(10, 'ab') // 'ababachina'
```
如果省略第二个参数，默认使用空格补全长度；
```
'china'.padStart('7')   // '  china'
```

场景实例 （补全日期）

var month = String(new Date().getMonth() + 1).padStart(2, '0');	// 06
var date = String(new Date().getDate()).padStart(2, '0'); 			// 03

padEnd()

padEnd() 在原字符串末尾填充指定的填充字符串直到目标长度并返回一个新的字符串，不会对原字符串进行修改；

padEnd() 方法的使用，需要注意以下几点：

该方法不会对原字符串进行修改；

在没有第二个参数时，则用空格填充；

在实战中使用在补全时间戳的毫秒中会使代码变得非常简洁；

拼接字符串；

"china".padEnd(10, 'ilove')    // "chinailove"

如果原字符串的长度，等于或小于最大长度，则字符串补全不生效，返回原字符串；
```
'china'.padEnd(5, 'ab') // 'china'
'china'.padEnd(2, 'ab') // 'china'
```
如果补全的字符串和原字符串的长度大于目标 （targetLength） 的长度，补全的字符串会被截取；
```
'china'.padEnd(7, 'abc') // 'chinaab'
```
如果补全的字符串和原字符串的长度小于目标 （targetLength） 的长度，补全的字符串会被重复，多余的部分会被裁剪；
```
'china'.padEnd(9, 'ab') // 'chinaabab'
'china'.padEnd(10, 'ab') // 'chinaababa'
```
如果省略第二个参数，默认使用空格补全长度；
```
'china'.padEnd('7')   // 'china  '
```

场景实例 （补全时间戳的毫秒）；

let timestamp = 1581828518
timestamp = String(timestamp).padEnd(13, '0'); // 1581828518000

trim()

trim() 的方法返回值是去掉两端空白字符的字符串，并不影响原字符串本身，不接收任何参数；

在低版本浏览器中是不支持这方法的，一版会使用正则 /^\s+|\s+$/gm 的方式去去除字符串两边的空格的；

trim() 方法的使用，总结以下几点：

trim 方法会去除字符串两边的空白字符串；

如果只去除一边的字符串时可以使用 trimStart() 和 trimEnd()；

trimLeft() 是 trimStart() 的别名，trimRight() 是 trimEnd() 的别名；

删除前后的空白字符；

var str = '   foo  ';
console.log(str.trim());  // 'foo'

如果字符串只有一边有空白字符，则只删除一边的空白字符；

var str = 'foo    ';
console.log(str.trim());  // 'foo'
var str = '   foo';
console.log(str.trim());  // 'foo'

打赏作者

您的打赏是我前进的动力

微信

支付宝

ES6+ Math 对象的扩展

ES6+ 数组方法扩展

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. includes()
2. startsWith()
3. endsWith()
4. repeat()
5. padStart()
6. padEnd()
7. trim()