美文网首页
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-字符串模板与字符串新增的方法

    ES6模板字面量(template literal) 多行字符串 ES5情况下多行字符串 多行的字符串以 逗号 '...

  • TypeScript字符串新特性

    多行字符串 1. 多行字符串 其中 `` 用来定义 ES6 中的模板字符串,${expr} 用来在模板字符串中嵌...

  • JavaScript基础

    1.多行字符串表示方法 这是一个 多行字符串 测试 该方法为ES6新增。示例: 输出为: 2.用[]获取字符串的位...

  • Typescript 特性

    Typescript是根据es6来扩展的js 的超集。 字符串的特性有: 多行字符串: 字符串模版 可以使用$+大...

  • ES6常用新特性

    ES6新特性介绍 模板字符串 模板字符串实现字符串拼接 模板字符串实现多行字符串 结构赋值 对象的解构赋值 数组的...

  • 一、JavaScript 笔记之扫盲

    JavaScript 个人零碎笔记,不作为学习JavaScript 教程使用 1.字符串: es6 针对多行字符串...

  • es6学习笔记(二)----模板

    模板字符串es6中采用反引号(`)标识,他可以当做普通字符串来使用,也可以用来定义多行字符串,或在字符串嵌入变量注...

  • ES6之模板字符串的使用方法

    字符串模板引擎 什么是模板字符串?ES5中的字符串缺乏多行字符串、字符串格式化、HTML转义等特性。而ES6通过模...

  • ES6的多行字符串

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

  • ECMAScript 6入门(2)

    上篇文章我们介绍了ES6的多行字符串表示方法,map,set,for...of循环,rest参数以及let和con...

网友评论

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

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