写在开头
本文将带你深入理解ES6中的字符串
后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！
如果想更多了解ES6，请参考之前写过的一些文章：
ES6 一文弄懂 var let const 三剑客区别 吊打面试题
ES6 深入理解 …拓展运算符 合并数组及demo选项卡实例
字符串模板 深入
之前的一篇文章也有介绍关于字符串模板，不过不是特别深入，这次，要介绍的是模版里面可以里面放入函数及传参
执行以下代码：
function show(x){
return x;
};
let str = `return is ${show(666)}`;
console.log(str);
当然，就像普通函数一样，我们也可以获取json，不妨试试
function show(){
let json={data:100,msg:`获取成功`}
return json;
};
let str = `return data is ${show().data} and mst is ${show().msg}`;
console.log(str);
显然，从控制台结果看的话是可以获取json里面的数据的
深入理解 数组中的map
说到map，或许大家想到的是key-value，但是在ES6中数组可不是这样用的哦，在ES6的数组中，和map方法类似还有find 和 findIndex，我们用实例来看看吧：
let arr = [1,2,3];
arr.find((x,y,z)=>{
console.log(x,y,z);
})
这个在前文：ES6 深入理解 数组中 find 方法 有提到过，如果不是很懂的话，可以去看看。
再来看看findIndex：
let arr = [1,2,3];
arr.findIndex((x,y,z)=>{
console.log(x,y,z);
})
再来看看map
let arr = [1,2,3];
arr.map((x,y,z)=>{
console.log(x,y,z);
})
看完上述内容，你是否在疑惑，好像没什么区别啊，好，现在我们来深入了解一下：
诶，好像有了区别了，这个是函数的返回值得区别，既然是介绍数组中的map，我就只拿map来当实例进行分析了。
既然是返回值的不同，我们不妨就修改一下上述代码，看看返回值是不是这个：
let arr = [1,2,3];
var res = arr.map((x,y,z)=>{
//console.log(x,y,z);
})
console.log(res);
果然，map返回的起始是一个数组
为了印证上述猜想，我们继续修改如下代码：
let arr = [1,2,3];
var res = arr.map((x,y,z)=>{
return x;
})
console.log(res);
猜想是正确的（虽然本来就知道是数组【滑稽】）
重点来了，返回一个数组到底能干什么呢？能干的东西当然很强大：
let arr = ['button','text','button'];
var a = arr.map((x,y,z)=>{
//console.log(x,y,z)
var oBtn = document.createElement('input');
oBtn.type=x;
return oBtn;
});
console.log(a);
我们可以直接通过map来向页面加入我们的组件，你说强大否？
现在，你已经明白了map会返回数组，那么现在来给你展示高级操作，配上标签模板，来制作一个简单的选项卡demo
代码没有多长，目前是没有添加事件的，讲解后面的内容后，在进行一次整合。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content>div{
width: 200px;
height: 200px;
background: #CCCCCC;
display: none;
}
.content>div:first-of-type{
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
var jsonData = {
'topValue':['红色','蓝色','黄色'],
'bottomInner':['red','blue','yellow']
}
createNode = json =>`<div class=content>
${json.topValue.map((v)=>`<input type=button value=${v}>`).join('')}
${json.bottomInner.map((v)=>`<div>${v}</div>`).join('')}
</div>`;
document.body.innerHTML = createNode(jsonData)
</script>
</body>
</html>
效果如下：
字符串的String.raw``方法
raw方法或许大家用到过，但是并不清楚还有这玩意，下面简单介绍一下
举个栗子：
我们想把字符串竖着写，你会怎么写呢
let str= `Y\nC\nY`;
console.log(str);
最先可能想到的是直接用 \n 就行了
那么，raw 到底干嘛用的呢，如下所述：我们想要让输出也能显示\n呢，你会怎么做？
或许，你会这样写：
let str= `Y\\nC\\nY`;
console.log(str);
确实，达到了我们想要的效果，那么如果需要显示的比较多呢？你还要一个个加上 转义字符 / 吗
我们可以这样：
let str= String.raw`Y\nC\nY`;
console.log(str);
达到了同样的效果，那么它的作用呢就是取消转义，可能平常遇到了但也没有想到，这里就提及一下。
那么，下一篇我们将深入讲解number系列 ，关于最终选项卡会放在后续，点个赞，催更快！
总结
map 用法跟find ／ findIndex 差不多
返回的不一样
最后 会返回数组
字符串的String.raw``方法
可以取消转义
学如逆水行舟，不进则退
