带你了解es6字符串的扩展

• 字符串的遍历

  es6中字符串可以在for…of循环中进行遍历，因为字符串内部使用了Iterator遍历器

	for (let str of 'string') {
		console.log(str)
	}
	// s
	// t
	// r
	// i
	// n
	// g

• JSON.stringify()

  根据标准，JSON使用utf-8的编码，但JSON.stringify()有可能会返回不符合utf-8的数据
  JSON.stringify()的问题在于，他可能返0XD800-0xDFFF之前的单个码点

	JSON.stringify('\u{D834}') 
	// "\u{D834}"

ES2019中修改了JSON.stringify()的行为遇到0XD800-0XDFFF之前的单个码点，或者不存在的匹配，就会先转换为转义字符，留着后续处理

	JSON.stringify('\u{D834}') 
	// ""\\uD834""
	JSON.stringify('\uDF06\uD834') 
	// ""\\udf06\\ud834""

• 模板字符串

  传统的字符串拼接方法很费力

	let str = age + '岁' + name + '小明' + sex + '男' + 'car' + 'BMW' + money
	// 要写大量的双引号

es中提出了一种新方案来改善这种写法

	let str = `${age} + 岁 + ${name} + 小明 ${sex} + '男' +....`
	// 方便，并且出错几率很小

记得初学js的时候，被拼接搞得头疼，经常出错，开发的时候也是，你可能不注意就出错了！

	// 普通字符串
	`In JavaScript '\n' is a line-feed.`
	
	// 多行字符串
	`In JavaScript this is
	 not legal.`
	
	console.log(`string text line 1
	string text line 2`);
	
	// 字符串中嵌入变量
	let name = "Bob", time = "today";
	`Hello ${name}, how are you ${time}?`

是不是很方便了呢
还有就是如果你想在模板字符串在使用(`)则需要进行转义

	let str = ` \`str\`, string!!!`

你需要在(`)前加上转义字符，这样才能正常解析

并且如果你使用模板字符串，在输出组件的时候不会清空留白

	div.innerHTML = `
		<ul>
			<li>hello</li>
			<li>hello</li>
			<li>hello</li>
		</ul>
	`

模板字符串中嵌套变量，需要使用${}来包裹

	let str = 'hello';
	let str1 = 'world';
	console.log(`${str},${str1}`;

大括号内可以放置运算，对象属性

	let x = 1;
	let y = 2;
	
	`${x} + ${y}` = `${x + y}`;
	// 1  +  2    =   3
	
	`${x} + ${y * 2}` = `${x + y * 2}`;
	// 1  +   4   =   5

	let obj = {
		foo: 123,
		bar: 234
	}

	`${obj.foo + obj.bar}`
	// 357
	

模板字符串中使用函数

	function test () {
		return `hello es6`;
	}
	`welcome ${test()}`;
	// welcome hello es6

如果模板花括号里的不是字符串，将转为字符串

模板字符串可以嵌套使用

	const tmpl = addrs => `
	  <table>
	  ${addrs.map(addr => 
		  `
		    <tr><td>${addr.first}</td></tr>
		    <tr><td>${addr.last}</td></tr>
		  `
	  ).join('')}
	  </table>`;

引用模板字符串变量本身

	let test = (name) => `hello,${name}`;
	test('xiaoming');

• 标签模板

  可在一个方法后面紧跟着模板字符串，并可以执行

	alert`hello,es6`;
	// 上面这种写法和下面一样
	alert('hello,es6');
	alert(['hello,es6']);
	// 都可以得到预期的值

好了大致就了解了这么多，剩下还有一些深入的，感兴趣的小伙伴可以去看阮一峰的es6