``是es6的Template Literals(模版字符串),許多人對這個一知半解，今天在這邊總結下:

`${expression}`(表達式插補)

var x;
var y;
sth.innerHTML = `相對當前盒子坐標：x軸：${x},y軸：${y}`

這樣表示少了很多代碼量並且提高了閱讀性，不然你需要用+““+來拼接字符串，將拼接字符串更簡單的表示出來，再舉栗子

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

模版表示法(${}裏面是js表達式，所以包括變量等)

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

多行字符串

console.log("string text line 1\nstring text line 2");
// "string text line 1
// string text line 2"

模版字符串表示法

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

只是簡單加了個回車

主要講講styled-components裏面的語法，用過這個框架的人都知道，定義一個包含樣式的h1：styled.h1`font-size:1.5em;.....`，這裏面就涉及到了模版字符串，一開始不知道為什麽這樣寫，以為又是什麽高科技，測試完才發現其實：

styled.h1`

font-size:1.5em;

`

就等於如下

styled.h1("font-size:1.5em;")

為什麽這樣說呢？

我們來看一個測試：

現在控制臺定義一個函數：

//在瀏覽器控制臺輸入
//這個函數的意思就是輸出這個函數的所有參數，js中的rest用法
const f = (...args) => {console.log(...args)}

在控制臺輸入：f(123) 或者 f(‘123‘)都是正確的輸出

在控制臺輸入：f`123${‘abc‘}`

輸出結果：(2) ["123", "", raw: Array(2)] "abc" >>>一個包含"123"，""的長度為2的數組，並在後面輸出abc

在控制臺輸入：f`123${‘abc‘}${‘def‘}`

輸出結果：(3) ["123", "", "", raw: Array(3)] "abc" "qwe" >>>一個包含"123"，"",""的長度為2的數組，並在後面輸出abc，cdf結合兩次輸出結果，可以發現它總是把${}裏面的東西轉換成""和正常的字符串放在一個數組裏面，並在後面單獨輸出每個${}的值

在控制臺輸入：f`1+2=${1+2}${[1,2,3,4]}`

輸出結果：(3) ["1+2=", "", "", raw: Array(3)] 3 (4) [1, 2, 3, 4] 現在足以證明只要被${}括起來都會轉換成""放在一個數組裏面，並且在後面輸入${}裏面的值

我們再來看一個測試：

//在瀏覽器控制臺輸入
//使用rest參數，當你傳入的參數是一個函數的話就執行這個函數，其他類型一概不執行
const testTemplate = (...args) => args.forEach(arg => {
    if (typeof arg === ‘function‘){
        arg();
    }
})

上面定義了一個函數，接下來我們來傳參數並且看結果了來測試模版字符串的精髓所在。

在控制臺輸入：testTemplate(1,2)

輸出結果：undefined >>>意料之中，因為當你傳入的參數是一個函數的話就執行這個函數，其他類型一概不執行。

在控制臺輸入：testTemplate(1,() => {consolo.log(‘執行了‘)})

輸出結果： 執行了 >>>這裏打印出‘執行了’，說明後面的函數被執行到

在控制臺輸入：testTemplate`1,() => {console.log(‘執行了‘)}`

輸出結果： 執行了 >>>跟上面加了括號的結果一樣。

所以styled.h1,styled.div等等其實都是一個函數，它們接受模版字符串這樣的參數，而為了實現根據傳入的props值顯示不同樣式，可以這樣定義：

const MyDiv = styled.div`
    color:${props => props.color};
    font-size:${props => props.bigger ? ‘2em‘ : ‘1em‘}
`

使用時，可以這樣寫：

//bigger={true} 也可以省略{true},直接寫 bigger
<MyDiv color="green" bigger={true}>something in div...</MyDiv>

總結：

styled-components其實就是函數傳遞。

React:styled-components