ES6 字符串模板 + DOM 实战：3 步实现待办列表渲染作为编程小白，刚接触 JavaScript 时是不是经常被字

作为编程小白，刚接触 JavaScript 时是不是经常被字符串拼接 数组遍历 网页渲染这些概念搞晕？尤其是想把数据显示到网页上时，看着一堆引号和加号就头大？

今天就结合 3 个循序渐进的代码案例，从基础语法到实战效果，带你吃透 ES6 字符串模板的核心用法，还能学会如何用 DOM 编程把数据渲染到网页上 —— 全程大白话，小白也能轻松跟上！

一、先搞懂核心：为什么要学 ES6 字符串模板？

在 ES6 之前，JavaScript 拼接字符串是这样的：

let name = "张三";
let age = 20;
let info = "我叫" + name + "，今年" + age + "岁，喜欢编程";

不仅要写一堆+号，换行还得用\n转义，一旦变量多了，代码又乱又容易出错。

而 ES6 的字符串模板（用反引号 `包裹）彻底解决了这个问题，核心优势有 3 个：

直接嵌入变量：用${变量名}就能把变量值嵌入字符串，不用拼接
支持多行字符串：直接换行写，不用\n
可嵌入 JS 代码：${}里能写表达式、函数调用，灵活度拉满

这篇文章就围绕它，从「基础用法」→「数组遍历」→「网页渲染」一步步实战！

🧩二、案例 1：基础用法 —— 字符串模板 vs 传统拼接

先看最基础的对比，感受字符串模板的简洁：

// ES5 传统拼接
let w = "world";
let strEs5 = "hello " + w + "！今天天气真好";

// ES6 字符串模板
let strEs6 = `hello ${w}！今天天气真好`;

console.log(strEs5); // 输出：hello world！今天天气真好
console.log(strEs6); // 输出：和上面完全一样，但代码更干净

关键知识点：

字符串模板用反引号 ` 包裹
变量 / 表达式写在${}里，JS 会自动计算结果并嵌入

换行直接写，比如：

let multiLine = `第一行
第二行
第三行`;
console.log(multiLine); // 直接输出多行文本

🧩三、案例 2：进阶用法 —— 结合数组遍历生成 HTML 标签

实际开发中，我们常需要把数组数据转换成网页标签（比如待办列表）。先看如何用字符串模板 +map方法遍历数组：

// 待办事项数据（数组里装对象，每个对象是一个待办项）
const todos = [
  { id: 1, text: "学习es6" },
  { id: 2, text: "通读你不知道的javascript" }
];

// 用map遍历数组，把每个待办项转换成<li>标签
const todoTags = todos.map(function(todo) {
  // todo是数组里的单个对象（第一次是{id:1,text:'学习es6'}，第二次是第二个对象）
  return `<li>${todo.text}</li>`;
});

console.log(todoTags);
// 输出：["<li>学习es6</li>", "<li>通读你不知道的javascript</li>"]

关键知识点：

todos和todo的关系：
- todos：复数，是「待办项数组（集合）」，像一个 “待办清单本”
- todo：单数，是「数组里的单个待办项」，像 “清单本里的某一页”
- 核心：map方法会逐个取出todos里的元素，赋值给todo，让我们能操作单个待办项
todo的名字可以随便取吗？
- 语法上可以！比如改成item、task都能运行：
```
todos.map(item => `<li>${item.text}</li>`); // 完全没问题
```
- 但不建议乱取！要遵循见名知义，比如用todo对应todos，别人一看就懂
ES6 箭头函数简化写法：原来的function(todo) { return ... }可以简化成：
```
const todoTags = todos.map(todo => `<li>${todo.text}</li>`);
```
简化规则（小白记 3 点）：
- 省略function关键字，用=>代替
- 只有一个参数时，省略()（比如todo不用写成(todo)）
- 只有一句返回语句时，省略{}和return

🧩四、案例 3：实战用法 —— 把数据渲染到网页上（DOM 编程）

前面只是生成了标签数组，这一步我们要把它真正显示到网页上，完整代码如下（可以直接复制到 HTML 文件运行）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>待办列表实战</title>
</head>
<body>
  <!-- 用来装待办列表的容器（相当于一个“相框”） -->
  <div id="todosContainer"></div>

  <script>
    // 1. 定义待办数据
    const todos = [
      { id: 1, text: "学习es6" },
      { id: 2, text: "通读你不知道的javascript" }
    ];

    // 2. 找到网页上的容器（通过ID精准定位）
    const container = document.getElementById("todosContainer");

    // 3. 用字符串模板+map+join生成HTML，插入容器
    container.innerHTML = `
      <ul>
        ${
          // 遍历数组生成<li>标签，再用join("")把数组转成字符串
          todos.map(todo => `
            <li>${todo.text}</li>
          `).join("")
        }
      </ul>
    `;
  </script>
</body>
</html>

运行效果：

网页上会显示一个真正的待办列表：

学习 es6
通读你不知道的 javascript

逐行拆解核心步骤：

容器的作用：<div id="todosContainer">是网页上的 “占位符”，用来存放我们的待办列表。就像贴照片需要相框，JS 操作网页也需要一个明确的 “目标位置”。
找到容器：document.getElementById("todosContainer")这是 DOM 编程的基础方法，通过元素的id（唯一标识）找到网页上的标签，保存到container变量里 —— 后续操作container就相当于操作网页上的这个 div。
核心操作：container.innerHTML = 模板字符串
- innerHTML：DOM 元素的属性，作用是 “设置元素内部的 HTML 内容”
- 模板字符串里的结构：
  - 外层是<ul>（无序列表标签，网页列表的容器）
  - 内层${}里是 JS 代码：先遍历数组生成<li>标签，再用join("")把标签数组转成字符串（避免出现多余逗号）
为什么需要join("")？
- map方法返回的是数组（比如["<li>xxx</li>", "<li>xxx</li>"]）
- 如果直接插入数组，网页会显示<li>xxx</li>,<li>xxx</li>（中间多了逗号）
- join("")能把数组元素用空字符串连接成一个整体，最终得到干净的 HTML 字符串

不用改其他代码，网页会自动多一个列表项 —— 这就是「数据驱动视图」的雏形：改数据，网页内容就自动变了！

💡五、核心总结（小白必记）

字符串模板用包裹，${}` 里可以放变量、表达式、函数调用；
todos（复数）是数组集合，todo（单数）是数组里的单个元素，命名要语义化；
map方法用于遍历数组，把每个元素转换成目标格式（比如标签）；
渲染网页的步骤：找容器→生成 HTML→用innerHTML插入容器；
箭头函数是普通函数的简化写法，核心场景是遍历数组、回调函数。