Day9:介紹ES6的樣式面板值、箭頭函數、宣告變數

11th鐵人賽

vanilla666

團隊NUTC_IMAC_BLUE

2019-09-25 17:28:39

1122 瀏覽

分享至

今日目的

今天要介紹ES6的一些好用功能，ECMAScript 6.0（以下簡稱ES6）是JavaScript 語言的下一代標準，已經在2015 年6 月正式發布了，裡面有好用的語法可以使用。

樣式面板值

它是可以讓字串跟變數一起輸出，然後最後輸出算字串的一個功能，以鍵盤的 ` 為宣告開始，以另一個為結尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    console.log(` asdasd `);
</script>
</html>

如圖

宣告變數然後在樣式面值呼叫

在樣式面板值裡呼叫變數時需要${}，裡面還可以輸入其他文字，最後輸出會當作字串輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var text = 'Hello'; //宣告變數
    console.log(` ${text} World! `);

</script>
</html>

如圖

箭頭函數

本來函數宣告會像這樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
   function hello(){
       console.log('Hello');
   } 
   hello();
</script>
</html>

如圖

現在我們可以使用箭頭函數來取代一般宣告的函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
  var hello = () => { //宣告變數後使用箭頭函數
      //可以用箭頭函數來替代一般函數
      console.log("Hello!!!");
  }
  hello();//執行函數
</script>
</html>

如圖