ES6 - 字符串的扩展及新增方法

字符串的扩展及新增方法

前言

• 关于 ES6 的新增内容，第一：知道有什么，第二：知道怎么写
• 本文主要作用在于第一点，知道有什么。达到，在工作中遇到时，能够联想到 ES6，所以仅展示常用内容及简单示例。若所有内容都展示，相当于复制一份文档，没有任何意义。
• 如果需要详细内容，文档链接 : es6.ruanyifeng.com/

扩展

模板字符串

// 这两个变量在后面的示例中都会用到
let name = '张三'
let myStr = `法外狂徒 - ${name} - 弗拉基米尔` // 法外狂徒 - 张三 - 弗拉基米尔

Iterator 接口

// 可用 for of 循环遍历
for (let key of name) {
  console.log(key)
}
// 张
// 三

一些关于 Unicode 的扩展

详情见文档：es6.ruanyifeng.com/#docs/strin…

新增

includes

// 是否包含某个字符串
myStr.includes(' - 张') // true

startsWith、endsWith

// 是否以某个字符串开头的
myStr.startsWith('法外') // true

// 是否以某个字符串结尾的
myStr.endsWith('弗拉基米尔') // true

repeat

// 重复几遍并拼接
myStr.repeat(2) // 法外狂徒 - 张三 - 弗拉基米尔法外狂徒 - 张三 - 弗拉基米尔

padStart、padEnd

// 总长度为多少，在左侧填充哪个字符串
myStr.padStart(24, '12') // 1212121法外狂徒 - 张三 - 弗拉基米尔

// 总长度为多少，在右侧填充哪个字符串
myStr.padEnd(24, '12') // 法外狂徒 - 张三 - 弗拉基米尔1212121

at

// 索引为多少的字符
myStr.at(2) // 狂

replaceAll

// 替换所有
myStr.replaceAll('-', '|') // 法外狂徒 | 张三 | 弗拉基米尔

// replace，这是ES6以前的。替换第一个
myStr.replace('-', '|') // 法外狂徒 | 张三 - 弗拉基米尔

raw

// 解析模板字符串，返回原始数据。1.会计算${}中的变量 2.保留斜杠
String.raw`Hi\n${2 + 3}!` // Hi\n5!

trimStart、trimEnd

// 消除字符串 前、后 的空格
const s = '  abc  '
s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

matchAll

// 全部匹配查询。与正则的匹配方法 exec 加了全局关键字 g 后的效果相同
// 匹配了 正则表达式中小括号内的格式 的字符都会被返回
// 返回的是 Iterator，可用for of 遍历。或转成数组
const string = 'test1test2test3'
const regex = /t(e)(st(\d?))/g
for (const match of string.matchAll(regex)) {
  console.log(match)
}
//  [ "test1", "e", "st1", "1" ]
//  [ "test2", "e", "st2", "2" ]
//  [ "test3", "e", "st3", "3" ]

//转数组的两种方式
console.log([...string.matchAll(regex)])
// [['test1', 'e', 'st1', '1'],['test2', 'e', 'st2', '2'],['test3', 'e', 'st3', '3']]
console.log(Array.from(string.matchAll(regex)))
// [['test1', 'e', 'st1', '1'],['test2', 'e', 'st2', '2'],['test3', 'e', 'st3', '3']]