es6详解模板字符串

最新推荐文章于 2022-05-07 12:46:01 发布

@Grapefruit

最新推荐文章于 2022-05-07 12:46:01 发布

阅读量205

点赞数 1

分类专栏： ES6 文章标签：模板字符串

本文链接：https://blog.csdn.net/qq_43052274/article/details/103291615

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

模板字符串：

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

基本用法:

普通字符串

let string = `Hello'\n'world`;

console.log(string);

// "Hello'

// 'world"

多行字符串:

let string1 = `Hey,

can you stop angry now?`;

console.log(string1);

// Hey,

// can you stop angry now?

字符串插入变量和表达式。

变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

let name = "Henry";

let age = 23

let info = `My Name is ${name},I am ${age+1} years old next year.`

console.log(info);

// My Name is Henry,I am 24 years old next year.

模板字符串中还可以调用函数：

function makeUppercase(word){

return word.toUpperCase();

}

let template = `${makeUppercase('Hello')}!`;

下面可以用一段代码来理解一下具体的使用：

<body>

  <div class="container">
    <div id="template">
      
    </div>
  </div>
  
</body>

let name = "Henry";
let age = 23

function makeUppercase(word){
  return word.toUpperCase();
}

let template = 
  `
  <h1>${makeUppercase('Hello')}, ${name}!</h1>
  <p>${age + 1}</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  `;

document.getElementById('template').innerHTML = template;

好了，就是这些了，希望有用吧！！！

@Grapefruit

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
es6详解模板字符串

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)模板字符串：模板字符串相当于加强版的字符串，用反引号`,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。基本用法: 普通字符串 let string = `Hello'\n'world`;...
复制链接

扫一扫