vue语法 `${ }%` 是什么意思;

Question

在看vue开源的组件库的时候，看到这种语法。

return `${this.curSelectedIndex * (100 / this.listNum)}%`;

不解

Answer 1

这不是 Vue 的语法 是 ES6 的 Template Strings 模版字符串
就是用占位符的方式来拼接字符串

const name = '小缘'
const age = 14
console.info(`大家好，我叫${name}，今年${age}岁了`)
// 等价于
console.info('大家好，我叫' + name + '，今年' + age + '岁了')

// 最大的优势是支持换行字符串
const url = '//baidu.com'
const text = '百度一下，你就知道'
const html = `
  <div class="container">
    <a href="${url}">${text}</a>
  </div>
`
console.log(html)
console.log(typeof html)

可以去 Babel 官网查看编译后的结果

由于 SF Markdown BUG 链接打开会丢失代码，请手动复制下面链接打开查看

http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Cstage-2&targets=&browsers=&builtIns=false&code=const%20name%20%3D%20'%E5%B0%8F%E7%BC%98'%0Aconst%20age%20%3D%2014%0Aconsole.info(%60%E5%A4%A7%E5%AE%B6%E5%A5%BD%EF%BC%8C%E6%88%91%E5%8F%AB%24%7Bname%7D%EF%BC%8C%E4%BB%8A%E5%B9%B4%24%7Bage%7D%E5%B2%81%E4%BA%86%60)

---

建议先把 ES6 啃熟再来学框架 否则还会有更多你看不懂的写法
点击查看ES6模板字符串详细
Can I Use?

Answer 2

把默认的{{ }}模式匹配改成了ES6的风格，具体可以查看API
API

new Vue({
  delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

Answer 3

es6 的字符串模板语法，和 Vue 无关

Answer 4

你这个等价于：
var num = this.curSelectedIndex * (100 / this.listNum);
return num + "%";