美文网首页
ES6字符串模板拼接

ES6字符串模板拼接

作者: Locdee_落地 | 来源:发表于2018-08-07 17:28 被阅读0次

1、字符串需要用一对反引号( ` )包裹起来 ,它可以定义多行字符串,只用一对反引号
2、要拼进去的数据需要放在${}里面
3、大括号里面可以进行运算
4、大括号里面可以调用函数

<body>
  <!-- 字符串模板的使用 -->
  <article id="article">
      <h1></h1>
      <p></p>
    </article>
</body>
<script type="text/javascript">
    'use strict'//严格模式
    let obj = {
        title:"字符串模板拼接",
        content:"这里告诉你如何进行字符串模板拼接"
    }
    let articleElement = document.getElementById('article');
    // 以前添加内容的方式,innerHTML字符串拼接
    articleElement.innerHTML = "<h1>"+obj.title+"</h1><p>"+obj.content+"</p>";
    // 使用ES6字符串模板拼接,可以换行
    /articleElement.innerHTML = `<h1>${obj.title}</h1>
                                 <p>${obj.content}</p>`

    function fn(){
        return "带函数的"
    }    
    articleElement.innerHTML = `<h1>${fn()+obj.title}</h1>
                                <p>${obj.content}</p>`

相关文章

  • es6的模板字符串

    关于es6的模板用法,想要拼接字符串使用传统的字符串拼接“+”是比较麻烦的,尤其拼接复杂的东西时,而es6为我们提...

  • ES6常用新特性

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

  • 21.模板字符串和标签模板字符串

    ES6新增了模板字符串,用于字符串拼接 ES6新增了标签字符串 标签模板字符串执行结果: 函数的第一个参数为数组,...

  • es6、es7常用特性

    1、模板字符串模板字符串 不使用ES6 使用+号降变量拼接喂字符串 例:var name ='My name is...

  • 【基础知识】消除ES6模板字符串中的空格

    转:消除ES6模板字符串中的空格 在开发中经常要用模板字符串,在拼接HTML文件时会遇到模板字符串中的空格问题比如...

  • (五)ES6字符串模板箭头函数字面量

    本节知识点 字符串模板 箭头函数 字面量 字符串模板 在ES6里面字符串模板就是为了不用再把字符串拼接起来,省的有...

  • ES6 模板字符串

    为了能够让我们更加方便的拼接,操作字符串,ES6出了模板字符串。 模板字符串是用`反引号代替常规字符串的'单引号或...

  • ES6学习笔记(五)字符串的扩展

    ES5下的字符串拼接: +foo+的形式拼接,很麻烦而且很容易出错,ES6新增了字符串模板,可以很好的解决这个问题...

  • js中的正则表达式传递变量

    首先我们可以使用字符串拼接,将变量拼接到一个正则的字符串中,也可以使用ES6的模板字符串,得到正则格式的字符串之后...

  • ES6常用知识点总结

    字符串拼接 es6使用 包裹字符串,插入变量数据${变量名}// 字符模板的写法var ss= '苹果';var...

网友评论

      本文标题:ES6字符串模板拼接

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