14 ES6：樣板字串與箭頭函式

第 12 屆 iThome 鐵人賽

DAY 14

自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列第 14 篇

12th鐵人賽 javascript es6 templateliterals arrowfunctions

我是圈圈

2020-09-14 09:57:29

1500 瀏覽

分享至

前言

本來是要直接進行中間大魔王的關卡，但如果少講了樣板字串，會讓後面單挑大魔王時，程式碼變得很雜亂不容易閱讀。因此要先岔出來講一下這兩個東西。

樣板字串 Template literals

樣板字串又稱樣板字面值和模板字符串，和 let 與 const 一樣是 ES6 的新語法。個人認為這真的是超好用的語法，完全無法想像以前沒有這種語法要怎麼活(喂)。

在前面我們曾經談過 innerHTML ，要把字句從 js 中加到 html 時會使用雙引號或單引號，把 html 標籤包起來，用加號串聯字串、數字與標籤。之前寫的句子因為很短，可能感受不深，但你想過如果我要在 js 寫這段，用加號要加到何年何月嗎？

<div class = "wrap">
  <div class = "header">
    <h1>鳳梨</h1>
    <h2>太陽</h2>
    <h3>冰棒</h3>
  </div>
  <div class = "main">
    <img src = "https://cdn.pixabay.com/photo/2020/06/26/00/25/summer-5341326_960_720.jpg">
  </div>
</div>

恩... 更不用說有時候單引號雙引號忘記變換造成的 bug 了。因此，樣板字串絕對是你萬中選一的好朋友。幾個使用方法與注意事項如下：

反引號放 html字串，不須加換行即會秀出一樣的內容
例如上面那題，我是懶得用加號雙引號慢慢寫啦，如果改成樣板字串就簡單多了：

`<div class = "wrap">
  <div class = "header">
    <h1>鳳梨</h1>
    <h2>太陽</h2>
    <h3>冰棒</h3>
  </div>
  <div class = "main">
    <img src = "https://cdn.pixabay.com/photo/2020/06/26/00/25/summer-5341326_960_720.jpg">
  </div>
</div>`

對，就是這麼簡單。直觀的打 html 語法即可。上面標題的不須加換行也會秀出一樣的內容是指，在 html 中直接換行，就已經具備換行的效果，不用再另外加什麼東西上去。

如果本來包的內容裡已經有反引號，請用反斜線包住

和單引號雙引號一樣的問題，只是換成了反引號。如果本來包的內容已經有反引號，外面也包反引號，電腦會不知道你的反引號範圍到底是到哪邊，因此要另外包住。範例如下：

let greeting = `\`hello\`world`;
console.log(greeting); //印出‵`hello`world

用 ${} 放變數與表達式

最後，如果你的式子裡有變數和表達式，例如你是要取上面物件啊、陣列啊裡面的東西就蠻常遇到的，那請用 ${} 來放。

let house = {
    "username":"Sam",
    "room":2,
}

const num1 = 1;
const num2 = 2;

let content = `這間房子的主人是 ${house.username} ，有 ${house.room} 間房間`;

console.log(content); //印出 這間房子的主人是 Sam ，有 2 間房間

let content2 = `${num1+num2}`;

console.log(content2); //印出 3

箭頭函式 Arrow Functions

老實說箭頭函式算是一個我還不太習慣寫的東西，所以也是藉由鐵人賽再次複習一下觀念與寫法。

箭頭函式主要有以下四種語法，善用它的話可以大幅減少要打的字，卻能達到相同效果，可以說是省時好夥伴！以下會提到陳述式與表達式，不知道這是什麼的讀者請先回去回顧 07 函式。

參數=>{陳述式;} 或 (參數)=>{陳述式;}

函式裡若為單純宣告變數等等不會牽涉到運算的陳述式，在寫箭頭函式時如果只有一個參數，在參數外加不加括號都沒關係。

若函式有名字，不是匿名函式的話，請改成 let 函式名字 = function(){}的寫法。

function test(message){
  alert(message);
}

//箭頭函式寫法：

let test = message=>{alert(message);};

(參數一,參數二,參數三,...參數n)=>{陳述式;}
承上，如果陳述式要寫成箭頭函式，且參數有好幾個，參數外一定要加括號。這次我們用陳述式中的 if 判斷式練習看看。

function quiz(a,b){
  if(a==5 && b==5){
      console.log(('猜對了'));
  }else{
      console.log(('猜錯了'));
  };
}

//箭頭函式寫法：

let quiz = (a,b)=>{
  if(a==5 && b==5){
      console.log(('猜對了'));
  }else{
      console.log(('猜錯了'));
  };
};

()=>{陳述式;}
承上，如果根本沒有參數，也一定要加括號。

function a(){
  alert("a");
};

//箭頭函式寫法：

let a = ()=>{alert("a");}

(參數一,參數二,參數三,...參數n)=>表達式; 或 (參數一,參數二,參數三,...參數n)=>{return 表達式;}

函式裡若牽涉到運算的是表達式，外面不用包{}，如果真的要包，一定要記得加上 return！

let sum = function(a,b){
    return a+b;
}

//箭頭函式寫法：

let sum = (a,b)=>a+b;
//或寫 let sum = (a,b)=>{return a+b;}

最後請注意！箭頭函式不能用在建構式中，否則會出現 xxx is not a constructor 的錯誤訊息。

建構式

所謂的建構式是說，有時候我們會使用函式，設計一個空白物件樣板，利用 this 節省重複打的時間。

//設計一個空白物件
function Detail(name,gender){
  this.name = name;
  this.gender = gender;
  console.log(this.name+":"+this.gender);
};

//讓資料能代入並利用
let People1 = new Detail("Tom","male");
let People2 = new Detail("Mary","female");

這個方法可以透過相同樣板，不斷產生不同的物件。但就像剛剛提過的，不能使用箭頭函式來處理。

今天講到的樣板字串和箭頭函式，都必須透過大量書寫才會記住。不妨用我們之前使用過的範例改寫看看！

學習與參考資料

JS 學徒特訓班教學影片及練習題 36/39 關
箭頭函式：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions
鐵人賽：JavaScript 建構式：https://wcc723.github.io/javascript/2017/12/18/javascript-constructor/