js中类似${xx,xxxy}的语句——${}占位符的使用 & ``模板字符串的使用

js中类似$ {xx,xxxy}的语句——${}占位符的使用 & ``模板字符串的使用

`` 是模板字符串，ES2015新增的符号。

var x = 'a', y = 'b';
var z = `${x,y}`; //'b'

模板字符串里面${var}是变量的占位符。
x,y 逗号运算符是返回符号右边的值，这里面等于y。

1、应用场景

${}里边 依旧是js，外边也是js

var a = 1; 
console.log(`一共有${a}个鸡蛋！`)  // "一共有1个鸡蛋！"

js中类似${xx,xxxy}的语句

//  使用 ${} 来包裹一个变量或者一个表达式
const a = 1;
const b = 2;
const string=`${a}+${b}=${a+b}`;
//1+2=3
console.log(string)

2、vue语法 ${ } （模版字符串）

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

// 最大的优势是支持换行字符串

    <a href="http://www.baidu.com">百度一下，你就知道</a>
    <script>
        const url = 'http://www.baidu.com'
        const text = '百度一下，你就知道'
        const html = `

        <div class="container">
            <a href="${url}">${text}</a>
        </div>

        `
        console.log(html)
        console.log(typeof html)   // string
    </script>

3、vue中实例

<!-- 弹窗 -->
<el-dialog
           v-model="dialogVisible"
           :title="`${dialogIsEdit ? '修改' : '新建'}提醒`"
           width="520px"
           ></el-dialog>

//默认  新建提醒
dialogIsEdit: false,

效果