es6学习语法总结-字符串

字符串遍历

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

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// 'f' 'o' 'o'

这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

for (let i of text) {
  console.log(i);
}

 

ES6提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
//第二个参数表示从第几个位置开始搜索
//endsWith的行为与其他两个方法有所不同。
//它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
s.startsWith('world', 6) // true 
s.endsWith('Hello', 5) // true 
s.includes('Hello', 6) // false

 

repeat()方法

repeat方法返回一个新字符串，表示将原字符串重复n次，小数点会取整不是四舍五入，0~-1之间的小数取整后为0，NaN或字符串参数均会转换为0

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(-1) //报错

 

字符串补全长度功能

padStart()用于头部补全，padEnd()用于尾部补全，共接受两个参数。

第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。如果省略第二个参数，默认使用空格补全长度。

从前开始补全
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
从后开始补全
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

 

模板字符串

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

// 普通字符串
`In JavaScript '\\n' is a line-feed.` 
//  In JavaScript
        is a line-feed.

// 多行字符串
`In JavaScript this is
 not legal.`

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

 

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting =\Yo\\ World!;

 

使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。可以使用trim方法消除换行。

模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

//变量名写在${}之中，大括号内部可以放入任意的JavaScript表达式，可以进行运算

var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`

 

模板字符串之中调用函数。如果模板字符串中的变量没有声明，将报错

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`

 

标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。

alert`123`
// 等同于
alert(123)

 

如果模板字符里面有变量，会将模板字符串先处理成多个参数，再调用函数。

var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

 

String.raw()

用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

String.raw`Hi\\n${2+3}!`;
// "Hi\\\\n5!"

String.raw`Hi\\u000A!`;
// 'Hi\\\\u000A!'