js如何定义多行字符串，三种方法，在线编辑运行

当前端开发需要通过.html()、.before()，.after()或.append()动态地生成Dom中的子节点元素的时候，可能需要借助javascript来定义多行字符串的语法来定义相应的参数。那么js该如何定义多行字符串呢。这里将介绍三种相对比较简单的方法，有兴趣的可以通过每段实例代码下方的“试一试”来在线编辑测试运行。

---

js定义多行字符串的三种方法

js定义多行字符串的方法可能不止三种，这里介绍的三种是鄙人自个比较常用到的三种，如下：

使用字符串的运算符“+”

<p id='no1'>这是第一个段落！</p>

<script>
var html = '<p>这是第二个段落</p>'+
    '<p>这是第三个段落</p>'+
    '<p>利用+运算符可以将多行字符串拼接起来，这样的好处是可以像写html一样一行一行写，而不必因为不运用+运算符或其它方法而写在一行，那样的话修改和阅读维护都不方便。</p>'

$("#no1").after(html);

</script>

试一试

代码解析

如上代码，.after()可以在$("#no1")所获取到的元素后面添加Dom节点，和.append()有些类似。其它的如.html()则是直接将$("#no1")所获取到的元素的值进行替换，.before()则是在前面，刚好与after()对应。

---

使用反斜杠\定义js多行字符串

<p id='no2'>这是最后一个段落，因为这个例子将使用.before()来添加元素！</p>

<script>
var text = '<p>这是首个段落</p>\
    <p>这是第二个段落</p>\
    <p>使用反斜杠“\”可以定义js的多行字符串，效果与运算符+类似。</p>'

$("#no2").before(text);

</script>

试一试

代码解析

如上代码，使用反斜杠“\”也是js中定义多上字符串常用的一种方式，其运行的效果与上面的一个例子类似，只是这里运用到是.before()来添加Dom元素节点，所以段落的顺序有些不一样。

---

使用反引号“`”定义js多行字符串

<p id='no3'>点击下方的按钮之后，js代码将改变这个段落中的值！</p>
<button class='btn btn-default'>改变上面段落中的值</button>

<script>
var text = `<p>mac的反引号的键在“z”键的左边</p>
    <p>其它PC可以看下数字键1的左边</p>
    <p>使用前，记得切换输入法为英文。</p>`

$("button").click(function(){
	$("#no3").html(text);
})

</script>

试一试

代码解析

如上代码，反引号“`”可以较为方便地完成js多行字符串的定义。

---