字符串与字符串模板

字符串的扩展

字符串的扩展主要添加了一些新的方法，来解决es5中难解决的问题，同时还有模板字符串的相关用法

1.字符串Unicode的表示

Unicode说白了就是将字符以\u0000~\uFFFF的码点形式表示

'\u0062'
// b

在超出或者不满足\u0000~\uFFFF这个格式的，我们都需要采取措施才能够识别

\u后面不为四位需要在前面添加0补齐 超出四位数的话，需要通过两个字符表示

上面的问题都可以使用大括号来解决

a
'\u{61}'  // 'u0061'

'??'
'\u{20BB7}' "\uD842\uDFB7"

> 大括号表示法和四字节的utf-16编码等价的

2.codePointAt

codePointAt解决了以前转化成unicode后，JavaScript无法识别的情况

var a='??'

a.length //2
a.chartAt(0) //''
a.chartAt(1) //''
a.chartPointAt(0) // 55362
a.chartPointAt(0) // 57271

通过上面的例子我们可以很清楚的看到，这个字是由两个字符组成，即长度为2，一个字符等于两个字节，即改字有四个字节组成，这样的话javascript无法识别，chartPointAt只能取到一半的字节，则需采用codePointAt方法。

var a='??'
a.codePointAt() // 134071

装化成16进制 a.codePointAt().toString(16) // 20BB7

这样的话就可以识别了

但是得注意，由于length还是为2，所以在多个字符串返回的码点的位置就会发生变化，如：

var a='??a'
a.codePointAt(0) // 134071
a.codePointAt(1) // 57271
a.codePointAt(2) // 61

为了解决这个序号不对应的问题，我们可以采用for of来进行循环，该方法也是es6中才有的，能够识别32位的utf-16字符

var a='??a'
for(let chart of a){
    console.log(chart.codePointAt(0))
}
//  134071 61

3.string.fromCodePoint()

在es5中，我们只能通过string.fromChartCode(）来将码点装换成字符，不过这有个弊端，在码点大于0xFFFF的时候就会出现问题。

String.fromCharCode(0x20BB7)
// "?"

String.fromCodeCode(0x20BB7)
// "??"

4.字符串的遍历

在es6中为字符串添加了便利器接口，这样子的话就可以使用for of来遍历字符串。在上面的例子中我也提到了，具体用法看上面

5.字符串内的搜索

这块怎加了三个方法，includes startWith endWith，主要还是在判断该字符串中是否存在该参数，并且对位置进行判断。

var a='Hello World'
a.includes('Wor') // true
a.startWith('Hello') //true
a.endWith('World') //true

参数

参数一的作用就是用来查找的字符串，参数二则是用来表示从哪里开始搜索。

var a='Hello World'
a.includes('Wor',4) // false
a.startWith('World',5) //true
a.endWith('Hello') //true

6.repeat

该方法就是将字符串重复多次输出，参数为重复的次数

var a='abc'
a.repeat(2) // 'abcabc'
a.repeat(2.8) // 'abcabc'
a.repeat('2') // 'abcabc'

为空的情况 a.repeat(NaN) a.repeat(-1) a.repeat('asd')

总结一下就是首先将参数转化成init类型，为非正整数，得出的结果就是空，否则以倍数输出。

7.padStart(number, string) padEnd(number, string)

注意，number参数如果小于原字符串时，默认最小为原字符串长度。string未添加，则默认为一个空字符串

'abc'.padStart(5,'1123') // 'abc11'
'abc'.padStart(2,'1123') // 'abc'
'abc'.padStart(5) // 'abc  '

'abc'.padEnd(5,'1123') // 'abc11'
'abc'.padEnd(2,'1123') // 'abc'
'abc'.padEnd(5) // 'abc  '

这个方法存才一个特殊的功能，规定格式

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

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

7.模板字符串

这个功能点的添加我觉得是非常实用的。比起以往的字符串拼接要方便很多

ES5 
var a={
    name:'嘻嘻'
}
template= "

"+a.name+"

你可以想象在模板内容比较多的情况下代码代码是有多烦琐，所以在es6中采用了(“)来定义，同时采用${}来表示变量

ES6
var a={
    name:'嘻嘻'
}
template= `
    

${a.name}

这样看上去就非常明了，非常简洁，在react的jsx的语法糖中就使用了“的使用

如果在模板中想要使用`怎么办，还是老办法使用\放在前面

var a=`\`Helll\` World`

在模板字符串中所有空格和换行都是被保留的，所以必要的时候我们需要消除其中的空字符串，该模板字符串跟普通字符串是一样的支持trim的操作，删除当中当中额字符串。

var $(p).append(`
    

• Hello
• World
  • `)

${ }

变量放在里面，能够直接识别 能够放置函数 等够在括号中进行计算操作

var a = 5;
var b = 10;

`Hello ${ a + b } world ${ a * b }`;
// "Hello 15 world 50"


var fn=funciton(){***}
`这个是函数 ${ fn() }`

其实字符串模板还有很多东西，比如说标签模板等，不过暂时我觉得没用处，所以没太了解，后面涉及到会添加回来

raw

es6为String添加了一个非常好的方法，快速字符串中的变量转化，并对带有\进行转义

String.raw(`你好\n3423`) // “你好\n3423”