详解ES6字符串新增，字符串模板等

{
  console.log('a',`\u0061`);
  console.log('s',`\u20BB7`);
// se5的玩法// 当成了两个字符打印的	
  console.log('s',`\u{21DD8}`);
	console.log('b',`\u{21DC7}`);
	console.log('b',`\u{24CD9}`);
// 这时处理大于0xFFFF,在ES6中用{}包括起来就表示Unicode，此时可以正常编码

}

ES5中知识点：

两个用于访问字符串中特定字符的方法是：charAt()和charCodeAt()。这两个方法都接收一个

参数，即基于0 的字符位置。其中，charAt()方法以单字符字符串的形式返回给定位置的那个字符

（ECMAScript 中没有字符类型）。例如：

var stringValue = "hello world";

alert(stringValue.charAt(1)); //"e"

字符串"hello world"位置1 处的字符是"e"，因此调用charAt(1)就返回了"e"。如果你想得到

的不是字符而是字符编码，那么就要像下面这样使用charCodeAt()了。

var stringValue = "hello world";

alert(stringValue.charCodeAt(1)); //输出"101"

这个例子输出的是"101"，也就是小写字母"e"的字符编码。

charAt()和charCodeAt()对字符处理是不合理的！

ES6中

codePointAt 取码值，取出来的是十进制的，如果需要转成十六进制，用tostring(16)转成16进制

比较特别！！！

codePointAt （0） 取出来的是整个编码值 134071；

codePointAt （1） 取出来的整个码的后两位；

codePointAt （2） 取出来的是a的值97；

{

  console.log(String.fromCharCode("0x20bb7"));

// ES5中转换Unicode的方法，不能转换大于0xFFFF的编码

  console.log(String.fromCodePoint("0x20bb7"));

// ES6中的方法。可以完全完整解析

}

字符串遍历，ES5和ES6的对比

{

  let str='\u{20bb7}abc';

  for(let i=0;i<str.length;i++){

console.log('es5',str[i]);}

}

// ES5的结果：不能正常处理

 for(let code of str){

    console.log('es6',code);

  }

ES6的结果：正常解码

字符串方法

{

  let str="string";

  console.log('includes',str.includes("c"));

//判断是否包含某字段 返回布尔值

  console.log('start',str.startsWith('str'));

//判断是否以str字符为起始的

  console.log('end',str.endsWith('ng'));

//判断是否以ng为结束的！

}

{

  let str="abc";

  console.log(str.repeat(2));

//重复两次输出，复制叠加。。结果：abcabc

}

// raw

{

  console.log(String.raw`Hi\n${1+2}`);

//使\n换行符不生效，提前做了在\n之前的多加了个\这样就不生效了

  console.log(`Hi\n${1+2}`);





}

 

模板字符串

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`

<ul>

<li>first</li>

<li>second</li>

</ul>

`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul> 标签前面会有一个换行。如果你不想要这个换行，可以

使用trim 方法消除它。

$('#list').html(`

<ul>

<li>first</li>

<li>second</li>

</ul>

`.trim());

{

  let name="list";

  let info="hello world";

  let m=`i am ${name},${info}`;

//首先使用的是1键左边的那个按键叫做反引号，变量包裹用${}

  console.log(m);

}





{

  console.log('1'.padStart(2,'0'));

//2，代表这个字符串要两位，0代表如果不够两位就在前边补0，上边代码结果为01

  console.log('1'.padEnd(2,'0'));

2，代表这个字符串要两位，0代表如果不够两位就后边补0，上边代码结果为10

}

标签模板

作用：在过滤html字符串的时候，防止xss攻击的时候特别好！

模板是多语言的转换，这个时候一套模板可以通过return不同返回值实现！

{

  let user={

    name:'list',

    info:'hello world'

  };

  console.log(abc`i am ${user.name},${user.info}`);

}