JS：ES6中新增字符串表示方式

模板字符串

还在不停地拼接变量和字符串？不仅麻烦，而且容易出错。

ES6允许我们使用反引号（数字1旁边的那个）来定义字符串，然后在字符串中使用${变量名}来引用变量，引用时可以对变量进行一些运算。

这一方式也让我们能够很好地使用html元素，而不用不断地使用字符串来拼接。

//单引号不允许换行写，会报错
const temple = '  
';

//双引号也不允许换行写，会报错
const temple = "
";

//但是反引号允许
const temple = `
    <div>
        <font>反引号的优势</font>
    </div>
`;

另外，模板字符串是允许嵌套的。

---

标签模板字符串

模板字符串里主要分为两种元素，一种就是普通的字符串，还有一种就是引用的变量。

那么，如果我想获取模板字符串里的元素，并对它做一些处理，要怎么做呢？可以在模板字符串前添加一个无分隔的标签。然后使用该标签名建立函数时，就能获取到模板字符串里的元素，并加以处理。

<script>
        const name = 'jack';
        const age = 15;

        const templ = result`${name}今年${age}岁了！`;
        
        function result(strings, name ,age){
            console.log(strings);  //["","今年"，"岁了！]
            console.log(name); //jack
            console.log(age); //15
        }
</script>

要注意的几个地方

1、因为js中函数无法通过类型来确定，所以函数会第一个接收字符串数组，然后各变量按顺序传递。

2、字符串会被引用的变量分隔，然后拆成一个字符串数组。而且如果变量在模板字符串的第一个或者最后一个位置，获取的字符串数组就会在前或后多一个空字符串。

3、如果参数直接使用变量相同的名字，就可以直接获取，不管有没有在参数中明确定义。（但是字符串数组的参数不可省）。

4、如果变量太多，可以使用剩余参数的形式来定义，此时会将所有的变量存进一个数组。

function result(strings, ...values){ //剩余参数用三个点来表示
     console.log(strings);  //["","今年"，"岁了！]
     console.log(values); //["jack",15 ]
 }

以上三个点的表示方法用于接收剩余参数（剩余参数只能放在最后），另一方面，也可以用该表示方法来对数据进行展开，比如

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];

const arr = [...arr1, ...arr2];
//效果相当于
const arr = [1, 2, 3, 4, 5, 6, 7, 8];

同理也可以对json进行展开。

另外还有很多字符串处理方法，具体可以参考js参考文档https://www.w3school.com.cn/jsref/jsref_obj_string.asp

---

补充json相关

json属于一个对象，标准写法是：{"key": "string", "key": 10}，键都要用双引号引起来，如果值是字符串，也要用双引号引起来。在js中，键的双引号可以省略，此为简化写法，但是到其他语言中，不一定合法。

JSON对象有两个常用方法：

一个是将json数据格式化为字符串JSON.stringify(json数据)；

另一个是将字符串解析为json数据JSON.parse(json标准格式字符串)。