字符串与字符串模板

字符串的扩展

字符串的扩展主要添加了一些新的方法，来解决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

• includes 用来判断该字符串中是否包含参数字符串
• startWith 用来判断字符串是不是已参数字符串为开头的
• startEnd 用来判断字符串是不是以参数字符串为结尾的

参数

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

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)

• padStart 用来在字符串前面添加指定长度缺少数量的参数字符串字符串
• padEnd 用来在字符串结尾添加指定长度缺少数量的参数字符串字符串

注意，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= "<div ><p>"+a.name+"</p></div>"

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

ES6
var a={
    name:'嘻嘻'
}
template= `
    <div >
        <p>${a.name}</p>
    </div>
`

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

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

var a=`\`Helll\` World`

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

var $(div).append(`
    <ul>
        <li>Hello</li>
        <li>World</li>
    <ul>
`)

${ }

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

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”