3.String扩展

ES6对String类型作了一些扩展，本文主要介绍最重要的两个

1.模板字符串

---

ES6引入了模板字符串${exp}，可以在{}里面插入数据，从而避免了字符串的繁杂操作。没有模板字符串之前，一些功能写起来很机车：

var profile = document.getElementById('profile');
user = { name: '肖宇晨', profile: '这个人除了帅，一无是处'}
profile.innerHTML =
  '<h1>' + user.name + '</h1>' +
  '<p>' + user.profile + '</p>'

现在引入模板字符串,明显舒适多了~

profile.innerHTML = `
  <h1> ${user.name} </h1>
  <p> ${user.profile} </p>
`

在模板中也可以调用函数

function fn() {
  return '肖宇晨'
}
`foo ${fn()} bar`
// foo 肖宇晨 bar

也可以这样花式调用

let friends = [
  {name:'jack' ,id:1},
  {name:'tom' ,id:2}
]
const getFriends = friends =>`
<ul>
    ${
	   friends.map(friend=>`
      	 <li>${friend.id}</li>
      	 <li>${friend.name}</li>
       `)
        .join('')
      }
  </ul>
`
var profile = document.getElementById('profile');

profile.innerHTML =getFriends(friends)

2.扩展方法

---

ES6对String的原型上进行了方法扩展，以下是常用的：

includes(str, index) // 从index开始检测是否含有str字符串，index默认为0
replaceAll(str, newStr) // 将子字符串str全部替换为newStr,等价于: replace(/str/g, newStr)，这里用了正则

fromCharCode(unicode) // 将unicode码点返回对应字符
startsWith(str, index) // 从index开始检测是否以str字符串开头
endsWith(str, index) // 你猜猜~

repeat(n) // 将字符串重复n遍并返回
padStart(len, str) // 检测字符串是否满足len长度，若不满足在其前方用子字符串str补全
padEnd(len, str) // 你懂的~

trim() // 去除前后空格
trimLeft() / trimStart() // 你猜猜~
trimRight() / trimEnd() // 你猜猜~