Javascript - 如何代码中字符串换行书写

淡淡的烟草味﹌ 2023-03-13 02:14 17阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于了解前端项目字符串换行显示的一些书写方式.&nbsp; 即可在源码换行书写, 实际上输出是单行, 也可以是实际输出也是多行显示. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> Javascript中，字符串默认只能写在一行内，分成多行将会报错。 &nbsp; 'a b c' // SyntaxError: Unexpected token ILLEGAL 上面代码将一个字符串分成三行，JavaScript 就会报错。 <img alt="" height="114" src="https://img-blog.csdnimg.cn/20200509160648191.png" width="645"> &nbsp; 如果长字符串必须分成多行，//只是源代码总多行显示 方式如下: 方式一: 可以在每一行的尾部使用反斜杠 
 <blockquote> 
 var longString = 'Long \ long \ long \ string'; 
 longString // "Long long long string" &nbsp; 
 </blockquote> <img alt="" height="195" src="https://img-blog.csdnimg.cn/20200509160636179.png" width="453"> 上面代码表示，加了反斜杠以后，原来写在一行的字符串，可以分成多行书写。 但是，输出的时候还是单行，效果与写在同一行完全一样。 注意，反斜杠的后面必须是换行符，而不能有其他字符（比如空格），否则会报错。 &nbsp; &nbsp; 方式二: 连接运算符（<code>+</code>）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。 
 <blockquote> 
 var longString = 'Long ' &nbsp; + 'long ' &nbsp; + 'long ' &nbsp; + 'string'; 
 </blockquote> <img alt="" height="190" src="https://img-blog.csdnimg.cn/2020050916062134.png" width="533"> &nbsp; &nbsp; 如果想输出多行字符串， 方式一: 利用多行注释的变通方法。 (function () { /* line 1 line 2 line 3 */}).toString().split('\n').slice(1, -1).join('\n')&nbsp; //用到自执行函数 // "line 1 // line 2 // line 3" <img alt="" height="286" src="https://img-blog.csdnimg.cn/20200509160601608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="658"> 方式二: <code>\n</code>表示换行，输出的时候就分成了两行。 
 <blockquote> 
 console.log('1\n2') // 1 // 2 &nbsp; 
 </blockquote> <img alt="" height="217" src="https://img-blog.csdnimg.cn/20200509162946531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="402"> &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> 1.关于JavaScript中的自执行函数, 即看着[顾名思义]不用调用, 便会执行. <img alt="" height="176" src="https://img-blog.csdnimg.cn/2020050916125838.png" width="483"> 具体:&nbsp; <a href="https://wangdoc.com/javascript/types/function.html" rel="nofollow">https://wangdoc.com/javascript/types/function.html</a> <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20200511170008709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="682"> &nbsp; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://wangdoc.com/javascript/types/string.html" rel="nofollow">https://wangdoc.com/javascript/types/string.html</a>&nbsp; //字符串 <a href="https://wangdoc.com/javascript/types/function.html" rel="nofollow">https://wangdoc.com/javascript/types/function.html</a>&nbsp; &nbsp;//阮一峰 -&nbsp;立即调用的函数表达式（IIFE） </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...