Skip to main content

字符串使用扩展

一、ES6 模板字符串​

传统的 JavaScript 输出模板通常是这样写的：

let firstName = 'Will';
let lastName = 'Smith';
let name = 'My firstName is：' + firstName + ', my lastName is：'+ lastName;

这种写法很不方便，所以 ES6 引入了模板字符串：

let firstName = 'Will';
let lastName = 'Smith';
let name = `My firstName is：${firstName}, my lastName is：${lastName}`;

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

1、基本用法​

`Leophen is a man`

2、多行字符串​

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，例如：

`Leophen is
a man`
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

3、字符串嵌入变量​

let name = 'Leophen', time = 'today'
`Hello ${name}, how are you ${time}?` // Hello Leophen, how are you today?

上面代码中的模板字符串，都是用反引号（大键盘 1 左边的键）表示。 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义，例如：

`\`Hello\` Leophen!` // `Hello` Leophen

4、字符串嵌入表达式​

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还能调用函数。

function fn() {
  return "Hello World";
}
`${fn()}` // Hello World

二、ES6 字符串的新增方法（节选）​

1、padStart() 和 padEnd()​

用于某个字符串不够指定长度，在头部或尾部补全。

  • padStart() 用于头部补全。
  • padEnd() 用于尾部补全。

二者都接受两个参数，一个是字符串补全生效的最大长度，另一个是用来补全的字符串：

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串：

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

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

'abc'.padStart(5, '12345')
// '12abc'

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

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

2、startsWith() 和 endsWith()​

  • startsWith() ：返回布尔值，表示参数字符串是否在源字符串的头部；
  • endsWith() ：返回布尔值，表示参数字符串是否在源字符串的尾部；
let s = 'Hello Leophen'

s.startsWith('Hello'); // true
s.endsWith('Leophen'); // true

如果有第二个参数，则表示搜索的起始位置：

let s = 'Hello Leophen'

s.startsWith('Hello', 6); // false
s.endsWith('Hello', 5); // true

3、includes()​

includes() 返回布尔值，表示是否找到了参数字符串：

var s = 'Hello Leophen';
s.includes('Leophen') // true

如果有第二个参数，同样表示搜索的起始位置：

var s = 'Hello Leophen';
s.includes('Hello', 6) // false

4、repeat()​

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

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

参数如果是小数，会向下取整：

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

如果 repeat 的参数是负数或者 Infinity，会报错：

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

但是如果参数是 0 到 -1 之间的小数，则等同于 0，这是因为向下取整了：

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

如果 repeat 的参数是字符串，则会先转换成数字：

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

「点击查看 JS 字符串属性方法汇总」

三、ES6 关于 Unicode 的表示​

ES6 加强了对 Unicode 的支持，允许采用 \uxxxx 形式表示一个字符，其中 xxxx 表示字符的 Unicode 码点，例如：

"\u0061"       // "a"

但这种表示法只限于码点在 0000 ~ FFFF 之间的字符。超出这个范围的字符，必须用两个双字节的形式表示，例如：

"\uD842\uDFB7" // "𠮷"
"\u20BB7"      // " 7"

上面代码是因为直接在 \u 后面跟上超过 0xFFFF 的数值（比如 \u20BB7），JavaScript 会理解成 \u20BB+7。由于 \u20BB 是不可打印字符，只显示空格，后面跟一个 7。

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符，例如：

"\u{20BB7}"          // "𠮷"
"\u{41}\u{42}\u{43}" // "ABC"

四、ES6 字符串的遍历器接口​

ES6 为字符串添加了遍历器接口，使得字符串可以被 for...of 循环遍历。

let str = 'hello';
for(let key of str){
    console.log(key);
}

//h
//e
//l
//l
//o