es6模板字符串

目录

    • 介绍
    • 语法
    • 举例

介绍

模板字符串是ES6中非常重要的一个新特性。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。

语法

使用 tab 键上方的 反勾号(`) 包含字符串(可以换行),使用 ${变量名} 进行变量替换即可。

举例

如果我们需要将一个标签的 innerHTML 动态进行标签文本设置,使用原始方法如下:

首先,将多行标签字符串转为一行,并将里面的变量使用字符串拼接进行替换:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模板字符串title>
head>

<body>
    <div class="box">
        
    div>
body>

html>

<script>
    let id = 1, str = '模板字符串';
    const oBox = document.querySelector(".box");
    oBox.innerHTML = "
  • + id + ">" + str + "

"
;
script>

而使用模板字符串,将会非常方便:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模板字符串title>
head>

<body>
    <div class="box">
        
    div>
body>

html>

<script>
    const oBox = document.querySelector(".box");
    let id = 1,
        str = '模板字符串';
    let htmlStr = `
  • ${id}>${str}

`
; oBox.innerHTML = htmlStr;
script>

不需要进行换行,不需要进行字符串拼接,即可完成想要的操作。

你可能感兴趣的:(javascript,es6,es6,前端,javascript)