多行字符串

前言

  在阅读Vue官方文档的时候，发现了下图所示的代码，奇怪的是多了很多反斜杠「\」，不知道是什么意思。后来搜索了一下，了解了原因。

Vue文档代码

多行字符串

  一般情况下，我们使用字符串内容不会太长，基本一行就能放下，例如console.log('我是单行字符串')。但是在某些情况下，我们需要书写多行字符串，多行字符串的作用是用来提高源代码的可读性，尤其是当你处理预定义好的较长字符串时，把这种字符串分成多行书写更有助于提高代码的可读性和可维护性。在JavaScript中，主要有下面几种方法支持多行字符串：

• 「+」连接字符串
  这是最简单也是最蠢的办法，那就是将多行字符串分解为每一行的子字符串，然后使用「+」拼接起来。

var tmp = 'I' +
                 'love' +
                 'you'

• 「\」转义换行符
  在代码中，每一行的末尾其实都有一个换行符「\n」，在IDE中被隐藏起来了，我们看不到。但是在编译后的源码中可以看到，在我们希望换行的地方都会有一个换行符号「\n」。我们可以使用「\」来转义换行符，从而使得我们视觉上的多行字符串被计算机承认。

var htmlStr = '\
    <div>\
        content\
    </div>\
'

除了以上，还有一个典型的实例——Vue官方文档的实例，也是我第一次看见多行字符串懵逼的地方。这里的就需要注意，「\」不仅仅转义了换行符「\n」，在转义了单引号「'」，因为是在单引号构成的字符串里面。

• es6的模板字符串
  上面的方法，比最粗暴的「+」要好很多了，但是还是不自然，而且「\」破坏了字符串的结构，看上去太丑了。好在ES6引入了一个新特性——模板字符串。从语言层面上，解决了这个问题。ES6的模板字符串是将字符串视为了内部存在可变因素的动态字符串，不同于之前的静态字符串。这也就意味着，我们可以在模板字符串中，放入变量。多行字符串的效果只是附带的特性。

var str = `I
                love
                ${who}`

如上图代码所示，es6引入的模板字符串是由一对反引号「`」(键盘左上角~键)构成的，对于内部的字符串，可以自然的换行而不用添加多余的符号。同时支持${变量}的语法，在字符串内部插入变量。

参考文章

1. 模板字符串；
2. 折行字符串；