es6 字符串部分新用法（padStart，padEnd，repeat，startsWith，endsWidth，includes ）

最新推荐文章于 2025-01-19 18:50:48 发布

不忘初心才得始终

最新推荐文章于 2025-01-19 18:50:48 发布

阅读量528

点赞数

CC 4.0 BY-SA版权

文章标签： js es6

本文链接：https://blog.youkuaiyun.com/weixin_37935725/article/details/103059532

本文介绍ES2017中字符串处理的新特性，包括padStart、padEnd、repeat、startsWith、endsWith和includes方法的使用，以及它们在字符串格式化和搜索中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 字符串部分新用法

// padStart padEnd

//padStart()用于头部补全，即：把ab补全到xxx的头部，如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

//padEnd

{

let str = 'i'

let str1 = str.padStart(4,'mooc')

console.log(str1)

let str2 = str.padEnd(3,'mooc')

console.log(str2)

}

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'

'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

l另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

//repeat

//repeat方法返回一个新字符串，表示将原字符串重复n次，参数如果是小数，会被取整

//参数如果是负整数，会报错

//参数如果是字符串，则会先转换成数字

repeat()方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数，会被取整。

'na'.repeat(2.9) // "nana"

如果repeat()方法的参数是负数或者Infinity，会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat()视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat()方法的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

{

console.log('i'.repeat(10))

function repeat(str,num){

return new Array(num + 1).join(str)

}

console.log(repeat('j',3))

}

// startsWith endsWith

startsWith() 方法用于检测字符串是否以指定的前缀开始。

如果字符串以指定的前缀开始，则返回 true；否则返回 false。

endsWith() 方法用于测试字符串是否以指定的后缀结束。

如果参数表示的字符序列是此对象表示的字符序列的后缀，则返回 true；否则返回 false。注意，如果参数是空字符串，或者等于此 String 对象（用 equals(Object) 方法确定），则结果为 true。

{

const str = 'wo shi liyuhuan'

console.log(str.startsWith('o'))

}

// includes

{

const str = 'wo shi liyuhuan'

if(str.indexOf('wo') !== -1){ //判断我是不是存在的

console.log('对的')

}

// 还可以使用~ ~x = -(x+1)

if(~str.indexOf('li')){

console.log('存在')

}

if(str.indexOf('yu')){

console.log(str.indexOf('yu'))

}

if(str.includes('shi')){

console.log('存在')

}

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016引入了该方法。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // true
[1, 2, NaN].includes(NaN) // true
1
2
3
该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度(比如第二个参数为-4，但数组长度为3)，则会重置为0开始。

[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
1
2
没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {
// ...
}
1
2
3
indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1,表达起来不够直观。二是，它内部使用严格相等运算符进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN) // -1
1
includes使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN) // true
1
下面代码用来检查当前环境是否支持该方法，如果不支持，部署一个简易的替代版本。

const contains = (() => Array.prototype.includes
? (arr, value) => arr.includes(value)
:(arr, value) => arr.some(el => el === value)
)()
1
2
3
4
另外，Map和Set数据结构有一个has方法需要注意与includes区分。

-Map结构的has方法，是用来查找键名的，比如Map.prototype.has(key),

-Set结构的has方法，是用来查找值的，比如Set.prototype.has(value),