EP068. “用模板字符串（template literal）生成真正的搜索结果 HTML”

首页 › WordPress 开发课程 › LIVE SEARCH（续） · EP068

约 8 分钟· #EP068#LIVE SEARCH（续）

上一讲只是弹窗验证数据能拿到，这一讲把 alert() 换成真正把结果渲染进 resultsDiv 的 HTML。顺便复习了一下 CRUD（REST API 目前只用到了 R = Read/加载），然后用 ES6 模板字符串（反引号 ` `）代替传统字符串拼接来写多行 HTML，并用数组的 .map() + .join("") 遍历结果数组生成一串 <li> 列表项。中途还处理了一个关键的坑：回调函数里 this` 关键字指向错了对象，改用箭头函数解决。

涉及文件

wp-content/themes/fictional-university-theme/src/modules/Search.js （修改，getResults() 整个重写）

代码实现

// wp-content/themes/fictional-university-theme/src/modules/Search.js

// 修改：getResults() 从 alert 测试改成用模板字符串生成真实结果列表
getResults() {
  $.getJSON("/wp-json/wp/v2/posts?search=" + this.searchField.val(), posts => {
    this.resultsDiv.html(`
      <h2 class="search-overlay__section-title">General Information</h2>
      <ul class="link-list min-list">
        ${posts.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join("")}
      </ul>
    `)
  })
}

要点：

先把回调函数从普通 function (posts) {...} 改成箭头函数 posts => {...}。原因：普通函数作为 $.getJSON 的回调执行时，函数体内的 this 会指向触发它的 jQuery 方法本身，而不是 Search 这个对象；这一讲要用 this.resultsDiv 所以必须解决这个问题。可以用 .bind(this)，但更省事的做法是用箭头函数——箭头函数不会重新绑定 this，会直接沿用外层（getResults 方法）里 this 该指向的对象。
this.resultsDiv.html(...) 里用反引号包起来的是一个模板字符串（template literal），比传统的单/双引号字符串好在可以直接换行写多行 HTML，不用像老式 JS 那样每行结尾加反斜杠续行。
模板字符串里 ${...} 是「表达式插槽」：$ 后面接花括号，里面的内容会被当成真正的 JavaScript 代码执行并把结果代入，跟普通 jQuery 的 $ 没关系。
${posts.map(item => <li><a href="${item.link}">${item.title.rendered}</a></li>).join("")}：.map() 对数组里每一项运行一次箭头函数，返回一个新数组（这里是字符串数组，每项是一个 <li>）；如果不加 .join("") 直接把数组塞进模板字符串，输出时会带着默认的英文逗号分隔符，所以要用 .join("") 把它转成一个中间没有任何分隔符的纯字符串。
item.link 是这条结果的永久链接，item.title.rendered 才是真正的标题文字（title 本身是一个带 rendered 属性的对象，不能直接 item.title 拿去当文字用）。
search-overlay__section-title、link-list、min-list 这几个 class 是配合已有 CSS 让结果看起来有样式，不是这一讲新写的样式。

[截图：前台搜索 overlay 输入关键词后，真实显示"General Information"标题和可点击文章链接列表的画面]

Hook / Function 速查

名称	类型	用途
模板字符串 ` `	ES6 JavaScript 语法	允许多行字符串 + `${}` 表达式插值，替代传统引号拼接字符串
箭头函数 `(参数) => {...}`	ES6 JavaScript 语法	简写函数写法，且不会重新绑定 `this`，回调里想用外层 `this` 时很好用
`Array.prototype.map()`	JS 内建数组方法	对数组每一项执行一次函数，返回一个新数组（不改变原数组）
`Array.prototype.join(分隔符)`	JS 内建数组方法	把数组转成字符串，指定项与项之间用什么字符连接（这里传空字符串即不加分隔符）

常见坑

回调函数如果还是用传统 function 写法而不做任何处理，函数体里的 this 不会指向 Search 对象，this.resultsDiv 会是 undefined，导致代码报错；要么 .bind(this)，要么改用箭头函数（这一讲选的是箭头函数）。
.map() 生成的新数组如果忘记接 .join("")，输出到页面上时项与项之间会多出逗号。
容易把 item.title 直接当标题文字用，但它其实是一个对象，真正的文字在 item.title.rendered 里；item.link 同理是直接的字符串，不用再往里挖。

延伸 / 后续讲座会用到

下一讲 EP069 会处理「搜索结果是 0 条」时该显示什么，以及把 REST API 请求的网址从写死的本地地址改成用 wp_localize_script() 从 PHP 传过来的动态值。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 14, EP068