美文网首页
ES6的多行字符串

ES6的多行字符串

作者: NSWhoohoo | 来源:发表于2019-02-25 22:12 被阅读0次

    HTML的内容为了易读,需要多行书写,保留缩进和回车
    但是在JS中这样书写是合法的,错误提示Unterminated string literal

    var htmlString = "
    <html>
            <head>
                <meta charset='utf-8'></meta>
                <meta name='viewport' content='width=device-width initial-scale=1'></meta>
                <title>HTML</title>
            </head>
            <body>
            </body>
        </html>
    "
    

    ES6中的模版字符串

    模板字符串(Template String)是增强版的字符串,用反引号(``)标识,可以定义多行字符串,所有的空格、缩进和换行都会被保留

    var htmlString = `
    <html>
            <head>
                <meta charset='utf-8'></meta>
                <meta name='viewport' content='width=device-width initial-scale=1'></meta>
                <title>HTML</title>
            </head>
            <body>
            </body>
        </html>
    `
    

    ES5的hack

    在ES5中有三种合法的方式来写这种多行字符串

    转义newline

    var htmlString = "  \
    <html>  \
            <head>  \
                <meta charset='utf-8'></meta>  \
                <meta name='viewport' content='width=device-width initial-scale=1'></meta>  \
                <title>HTML</title>  \
            </head>  \
            <body>  \
            </body>  \
        </html>  \
    "
    

    拼接字符串

    var htmlString = " +
    <html> +
            <head> +
                <meta charset='utf-8'></meta> +
                <meta name='viewport' content='width=device-width initial-scale=1'></meta> +
                <title>HTML</title> +
            </head> +
            <body> +
            </body> +
        </html> +
    "
    

    join字符串数组

    var htmlString = [
    '<html>' ,
            '<head>',
                '<meta charset='utf-8'></meta>',
                '<meta name='viewport' content='width=device-width initial-scale=1'></meta>',
                '<title>HTML</title>',
            '</head>',
            '<body>',
           ' </body>',
        '</html>'
    ].join('')
    

    这样对比一看,还是ES6语言的新特性方便很多

    相关文章

      网友评论

          本文标题:ES6的多行字符串

          本文链接:https://www.haomeiwen.com/subject/kvynyqtx.html