JS-创建多行字符串

对着背影说爱祢 提交于 2020-02-29 02:50:52

很多时候我们要创建很长的字符串,如比如动态添加HTML的时候。PHP中我们可以用

  • nowdoc(单引号)定界符字符串:不识别变量,不识别转义字符(除了\'和\\,分别代表单引号和反斜线)
  • heredoc(双引号)定界符字符串:识别变量,识别转义字符

来创建多行字符串。但JS中要怎么做呢?

一:直接用加号连接

var ts = '<!DOCTYPE html>'+
'<html lang="en">'+
'<head>'+
'  <meta charset="UTF-8">'+
'  <title>Document</title>'+
'</head>'+
'<body>'+
'  hello world'+
'</body>'+
'</html>'

二、使用反斜线(续行符)

var ts = '<!DOCTYPE html>\
<html lang="en">\
<head>\
  <meta charset="UTF-8">\
  <title>Document</title>\
</head>\
<body>\
  hello world\
</body>\
</html>'

三、字符串数组join

var ts = ['<!DOCTYPE html>',
'<html lang="en">',
'<head>',
'  <meta charset="UTF-8">',
'  <title>Document</title>',
'</head>',
'<body>',
'  hello world',
'</body>',
'</html>'].join('\n')

四、String.prototype.concat

var ts = String.prototype.concat.call('<!DOCTYPE html>',
'<html lang="en">',
'<head>',
'  <meta charset="UTF-8">',
'  <title>Document</title>',
'</head>',
'<body>',
'  hello world',
'</body>',
'</html>')

五、Function.prototype.toString()

==注意:这种方法要保证JS不被压缩掉注释,并且要注意去掉注释号时别去掉文本了。==

var ts = (function(){/*
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  hello world
</body>
</html>
*/}).toString().split('\n').slice(1,-1).join('\n') + '\n'

可以封装成方法:

function doc(fn) {
  return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
}
var ts = doc(function(){/*
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  hello world
</body>
</html>
*/})

六、CoffeeScript

要编译才能得到JS文件

ts = """
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  hello world
</body>
</html>
"""

七、模板字符串(ES6新特性)

==符IE不支持!!!是反引号"`"而不是单引号"'"==
模板字符串 - JavaScript | MDN

var ts = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  hello world
</body>
</html>`
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!