js``模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

1.基本用法

使用反引号``来代替普通字符串中的双引号和单引号。

var a = `3\n4`;
console.log(a);

输出为

3
4

2.多行字符串用法

反引号中文本可以直接接受换行而不不必使用\n换行符来强制换行。
模板字符串中的换行和空格都是会被保留的.

  var a = `3,
     4`;
// var a = "3,
// 		4";             //而双/单引号不行，会提示错误
console.log(a);

输出为

3，
	4

3.核心用法

反引号中的${expression}占位符中expression可以为任意的JavaScript表达式，甚至为模板字符串。

var name = "ddd";
var age = 7;
var info = `我是${name},我${age + 1}岁了。`
//等价于：info="我是"+name+"，我"+(age+1)+"岁了。"
console.log(info);

输出为

我是ddd，我8岁了。

4.标签模板

如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以在通过该函数对模板字符串来进行操作处理。

alert`Hello world!`;
// 等价于
alert('Hello world!');

当模板字符串中带有变量，会将模板字符串参数处理成多个参数。

function f(stringArr, ...values) {
   let result = "";
   for (let i = 0; i < stringArr.length; i++) {
       result += stringArr[i];
       if (values[i]) {
           result += values[i];
       }
   }
   return result;
}
let name = '哥斯拉';
let age = 1000;
var aa= f`我是${name},我${age + 1}岁了。`;
console.log(aa);
// "我是哥斯拉,我1001岁了。"

f`我是${name},我${age + 1}岁了。`;
// 等价于
f(['我是',',我 ',' 岁了。'],'哥斯拉',1001);

把css写在js中

function test(...args) {//剩余参数 展开运算符
    console.log("test函数执行了")
    console.log(args)
}
test`
font-size:50px;
color:red;
`

输出为

css in js
css in js