javaScript:模板字符串让你忘记字符串拼接

目录

一.前言

二.模板字符串的使用

1.介绍

 2.模板字符串 支持换行

 模板字符串更适合元素写入

innerHTML模板字符串写法

3.模板字符串中,可以运行表达式

4.模板字符串中可以运行函数

 三.总结

语法:

多行字符串:

变量插值:

代码可读性:

容错性:


一.前言

       JavaScript中的模板字符串(Template Strings),也称为模板字面量,是一种方便创建多行字符串和插入表达式的方式。使用模板字符串可以将变量、表达式或函数嵌入到字符串中,而无需使用字符串连接操作符(+)。模板字符串使用反引号(`)作为字符串的定界符,而不是单引号或双引号。

二.模板字符串的使用

1.介绍

模板字符串

    使用 反引号 `` 作为字符串的标识

    在模板字符串中使用变量,使用方法是${变量名}

模板字符串对比传统字符串拼接在写法上和功能上都有明显优势

 let username = '岳飞'
    let age = 36
    let story = '打败金兀术'

    let str = '姓名:'+username+'年龄:'+age+'事迹:'+story
    console.log(str);
    /*
    模板字符串
    使用 反引号 `` 作为字符串的标识
    在模板字符串中使用变量,使用方法是${变量名}
    */ 
    let str1 = `姓名: ${username},年龄: ${age},事迹:${story}`
    console.log(str1);

 2.模板字符串 支持换行

    /*模板字符串 支持换行*/

    let str2 = `
        姓名:${username}
        姓名:${age}
        事迹:${story}
    `
    console.log(str2)

 模板字符串更适合元素写入

        在JavaScript中,使用字符串拼接进行换行可能会导致错误(或使用转义符(\n)插入换行符比较麻烦),但使用模板字符串则不会出现此问题。而且,通过使用模板字符串和innerHTML属性可以实现换行效果。相比之下,模板字符串对于代码的可读性和容错性都更高。

innerHTML模板字符串写法

  let btn = document.getElementById('btn')
    let list = document.getElementById('list')

    btn.onclick = function(){
        let html = ''
        for (let i = 0; i < 10; i++) {
           html += `
        
  • ${username}

    ${age}

    ${story}

  • ` } list.innerHTML = html }

    3.模板字符串中,可以运行表达式

      /*
        模板字符串中,可以运行表达式
        */
       let str3 = `1+1=${1+1}`
       console.log(str3);
    
       let str4 = `同时天涯沦落人,${3>4? '莫愁前路无知己':'从此消亡是路人'}`
       console.log(str4);

     

     

    4.模板字符串中可以运行函数

    /*
    模板字符串中可以运行函数
    */    
    function show(){
        return '莫愁前路无知己'
    }
    let str5 = `${show()},凭君传语报平安`
    console.log(str5);

     三.总结

           模板字符串和字符串拼接都用于创建字符串,但它们在语法和功能上有一些区别。下面是模板字符串和字符串拼接的对比总结:

    语法:

    • 字符串拼接使用加号(+)或concat等方法来连接多个字符串。
    • 模板字符串使用反引号()作为定界符,并使用占位符${}`插入变量、表达式或函数调用。

    多行字符串:

    • 字符串拼接需要使用换行符和字符串连接操作符来创建多行字符串,或者使用转义符(\n)插入换行符。
    • 模板字符串直接支持多行字符串,无需使用换行符或连接操作符,可以保留字符串中的换行符和缩进。

    变量插值:

    • 字符串拼接需要将变量通过加号或其他方法与字符串连接起来。
    • 模板字符串可以在占位符${}中直接插入变量、表达式或函数调用,并与其他字符串内容无缝搭配。

    代码可读性:

    • 字符串拼接可能会造成较长、难以阅读和维护的代码,尤其是在含有大量变量或复杂逻辑的情况下。
    • 模板字符串提供了更清晰、更易读的语法,将变量直接嵌入字符串中,使代码更易于理解和修改。

    容错性:

    • 字符串拼接容易出现遗漏加号或出错的情况,特别是在复杂的拼接操作中。
    • 模板字符串在插入变量或表达式时更直观且容易检查,并且避免了常见的错误。

    你可能感兴趣的:(javascript,开发语言,ecmascript)