ES6标准入门(三):字符串的扩展

前言

ES6加强了对Unicode的支持,并且扩展了字符串对象。

字符串原型上扩展的方法

我们一般可以通过这种方法来查看,原型上有哪些方法:

1
console.log(String.prototype)

includes(),startsWith()

indcludes() 返回布尔值,表示是否找到了参数字符串

startsWith() 返回布尔值,表示参数字符串是否存在源字符串的头部

  • 语法:第一个参数指定要查询的字符串,第二个参数(可选)是数字,表示开始查找的位置,这个参数如果不是数字将会转成数字
1
includes('指定字符', '开始查找的位置(可选参数)')
  • 例子
1
2
3
4
5
let str = 'abcdefg'
str.includes('c') // true
str.includes('c', 1) // true
str.includes('c', 3) // false
str.includes('c', null) // true

startsWith() 用法类似 indcludes()

endWith()

endWith() 返回布尔值,表示参数字符串是否存在源字符串的尾部

  • 语法:第一个参数指定要查询的字符串,第二个参数表示从前n个中查看,它针对前n个字符,而indcludes() startsWith() 针对第n个位置到字符串结束位置之间的字符
1
endWith('指定字符', '从前n个中查看(可选参数)')

repeat()

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

  • 语法:参数取整。如果是小数,会被取整;如果是负数或者infinity,会报错;如果参数是0到-1之间的小数,等同于0;如果参数是字符串,则会转换成数字。参数NaN等同于0。
  • 例子:
1
2
3
4
5
6
'a'.repeat(3) // 'aaa'
'a'.repeat(2.9) // 'aa'
'a'.repeat(-2) //报错
'a'.repeat(-0.3) // ‘’
'a'.repeat(infinity) //报错
'a'.repeat(‘a’) // ''

padStart(),padEnd()

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

按照指定字符补全字符串的指定长度。

  • 语法:第一个参数:长度,第二个参数:指定字符
1
2
padStart(length, '指定字符')
padEnd(length, '指定字符')
  • 例子:
1
2
let str = 'ab'
str.padStart(5,'x') // 'xxxab'
1
2
let str = 'ab'
str.padEnd(5,'x') // 'abxxx'

模板字符串

模板字符串是增强版的字符串,用反引号` 标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

1
2
3
4
// 普通字符串
let str1 = 'hello'
let str2 = 'world'
str1 += str 2 // 'helloworld'
1
2
3
4
// 模板字符串嵌入变量
let str1 = 'hello'
let str2 = 'world'
`<h1 class='${str1}'>${str2}</h1> `
1
2
3
// 多行字符串
`hello
world`

如果模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出中。

1
2
3
// 模板中使用表达式
let [x, y ] = [1, 2]
`${x} + ${y} = ${x + y}`

模板字符串甚至还能引用对象属性,调用函数,嵌套。

参考资料:

《ES6标准入门》(第3版) 阮一峰著

------ 本文结束  感谢阅读 ------