3.1 字符串

字符串的遍历器接口

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

let yehui = "jdlahjlda"
for (item of yehui) {
    console.log(item) //j d l a h j l d a
}

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

let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

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

模板字符串

• 模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
• 简化字符串的拼接
• 模板字符串必须用 `` 包含
• 变化的部分使用${xxx}定义

let obj = {
    name : 'anverson',
    age : 41
};
console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age); //我叫anverson我的年龄是41

console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);//我叫anverson我的年龄是41

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

let greeting = `\`Yo\` World!`;
//`Yo` World!

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

let x = 1;
let y = 2;

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

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

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

• 模板字符串还能调用函数

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

`foo ${fn()} bar`
// foo Hello World bar

• 如果模板字符串中的变量没有声明，将报错因此如果大括号内部是一个字符串，将会原样输出

// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错

//字符串原样输出
`Hello ${'World'}`
// "Hello World"

字符串新增的方法

String.raw()

• 第一次参数与后面的值穿插

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'


//原理
String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

includes(), startsWith(), endsWith()

• JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法
  • includes()：返回布尔值，表示是否找到了参数字符串。
  • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
  • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

//第二个参数
//startsWith和includes都是从第六个字符开始找
//endsWith是前5个字符
let s = 'Hello world!';

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

repeat()

• 返回一个新字符串，表示将原字符串重复n次
• 参数如果是小数，会被取整
• 如果repeat的参数是负数或者Infinity，会报错
• 如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0
• 参数NaN等同于 0
• 如果repeat的参数是字符串，则会先转换成数字

'x'.repeat(3.9) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
'na'.repeat('3') // "nanana"

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'

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

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

• 用途是提示字符串格式

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

trimStart(), trimEnd()

• trim()是消除所有的空格
• trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串
• 这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"