iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

草頭黃小姐的 30 天 JavaScript 自學小本本系列 第 23

Day 23 認識一下 ES6:常數、解構和字串與變數的串接

  • 分享至 

  • xImage
  •  

如果要定義一個常數的話,在 ES6 可以怎麼寫,我們可以用 const 這個字:

const age = 18;
console.log(age);

印出 18 這是沒問題的,但如果我們在定義一個常數 20 呢?

const age = 18;
age = 20; 
console.log(age);

這時候卻發生錯誤!為什麼?
因為常數的概念就是不能改變的值,如果你要改變它,就會發生 Erro

那 ES6 還有一個蠻方便的功能,就做 解構,解構的寫法長得像以下這樣:

var hero ={name:`孫悟空`, age=18};

let {name, age} = hero;

console.log(name); //印出孫悟空
console.log(age); //印出18

根據上面的程式碼,宣告一個 hero 裡面的 Key 有 nameage,它的對應 value 為孫悟空18。接著我們有個 here 個物件,用 let 包一個大括號,裡面寫下 name 和 age 就會對應到上面。接著印出 console.log 的 name 和 age 就能印出孫悟空和 18。

字串與變數的串接

如果我們要做字串與變數的串接,過去,我們可能會這樣寫:

var name= "Kitty";
console.log('Hello,'' + name); //印出 Hello, Kitty 的字樣

但你在 ES6 可以這樣寫:

var name= "Kitty";
console.log(`Hello, ${name}`); //印出 Hello, Kitty 的字樣

就是用 $ 字號,並用大括號包住 name,因此就不再去寫 + 號。就像寫一個字串的概念,只要在變數的地方加入 $ 並用大括號包住,就能印出宣告的值。


上一篇
Day 22 認識一下 ES6:宣告與變數
下一篇
Day 24 認識一下 ES6:箭頭函數
系列文
草頭黃小姐的 30 天 JavaScript 自學小本本30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言