Vue基础教程（17）ECMAScript 6语法之模板字面量：当Vue遇见ES6模板字面量：告别字符串拼接的“面条代码“时代！

最新推荐文章于 2025-11-24 03:44:17 发布

原创

最新推荐文章于 2025-11-24 03:44:17 发布 · 273 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ecmascript #es6

还记得那些年被字符串拼接支配的恐惧吗？密密麻麻的加号和引号缠在一起，活像一碗"代码面条"——多看一眼都头晕。别担心，ES6带来的模板字面量就是来拯救你的！而在Vue开发中，这玩意儿更是如鱼得水。今天咱们就一起揭开它的神秘面纱。

一、为什么我们需要模板字面量？

先来看个经典场景。假设你要在Vue里生成一段用户欢迎语：

// 老派写法（ES5）
data() {
  return {
    userName: '张三',
    userLevel: 'VIP'
  }
},
computed: {
  welcomeMessage() {
    return '欢迎,' + this.userName + '！您的等级是：' + this.userLevel + '。'
  }
}

看到这一连串加号了吗？要是变量再多几个，怕是写代码的人自己都要数花眼了。

更可怕的是多行字符串的场景：

// 传统多行字符串需要转义符
var htmlStr = '<div class=\"container\">\n' +
              '  <h1>标题</h1>\n' +
              '</div>'

每次写这种代码，我都觉得自己像个打字员而不是程序员！

模板字面量就是来解决这些痛点的：它用反引号（`）代替引号，用${}代替加号，让字符串拼接变得直观又优雅。

二、模板字面量基础：比你想象的更简单

2.1 基本用法

// ES6模板字面量
const name = '李四'
const message = `你好，${name}！`

console.log(message) // "你好，李四！"

是不是感觉眼睛瞬间清爽了？在Vue的methods或computed里用起来更顺手：

methods: {
  getWelcomeMessage(userName) {
    return `欢迎回来，${userName}！今天是${new Date().toLocaleDateString()}`
  }
}

2.2 多行字符串的解放

// 直接换行，无需转义！
const poem = `床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。`

// 在Vue模板中生成HTML片段
data() {
  return {
    htmlContent: `
      <div class="card">
        <h3>${this.title}</h3>
        <p>${this.c