幸運數字

幸運數字

學習練習

簡介

在 JavaScript 中,值可以有不同的型別。想改變變數的型別,可以透過明確的_型別轉換_來完成。除此之外,當情境需要時,JavaScript 也會進行_型別強制轉換_(隱式型別轉換)。

型別轉換

JavaScript 不像許多其他語言那樣具備把值轉型成(不同)型別的語法建構,但你可以改用一些內建輔助工具。其中最值得一提的是,Boolean、Number和String都可以當成函式使用,把值轉換成對應的型別。

轉換成布林值(真值與假值)

用Boolean(value)可以把任何值轉換成布林值。有一組固定會轉換成false的值,這些值稱為_假值_。最重要的是,false、0、空字串、null、undefined和NaN都是假值。

對其他所有值來說,Boolean會回傳true。這些值稱為_真值_。

Boolean(-1);
// => true

Boolean(0);
// => false

Boolean(' ');
// => true

Boolean('');
// => false

請注意,因為上述規則,'0'、'false'、[]和{}在 JavaScript 中都是真值。

轉換成數字

Number(value)可以用來把值轉換成數字。字串開頭和結尾的空白會被忽略,空字串則會轉換成0。如果你試著轉換非原始型別的值,或是無法表示成數字的字串,結果會是NaN(Not-A-Number)。

Number('  -12.34  ');
// => -12.34

Number('1,2');
// => NaN

Number('');
// => 0

Number({ num: 123 });
// => NaN

轉換成字串

用String(value)可以把值轉換成字串。對原始型別的值來說,結果就跟你預期的一樣。

String(12.34);
// => '12.34'

String(false);
// => 'false'

String(null);
// => 'null'

String(undefined);
// => 'undefined'

對陣列來說,String函式會對每個元素做字串轉換,再用逗號把結果串接起來。你也可以自己套用join 方法,例如自訂分隔符號。請注意,在這些情況下,null和undefined會轉換成空字串。

String([42, null, true, 'abc']);
// => '42,,true,abc'

對物件來說,String預設會回傳一段沒什麼用的文字。

String({ key: 'value' });
// => '[object Object]'

型別強制轉換

在某些情境下,JavaScript 會在求值某個敘述之前,自動把值轉換成另一種資料型態。這種隱式轉換就稱為_型別強制轉換_。

布林情境

當非布林值用在布林情境中時,JavaScript 會套用和Boolean函式相同的規則,隱式轉換這個值。

強制轉換成布林值常見於下列情況:

  • if 敘述的條件
  • 三元運算子?的第一個運算元
  • 邏輯 NOT 運算子!的運算元
  • 邏輯 AND &&與 OR ||運算子的運算元(運算式的結果會是其中一個運算元,不一定是布林值)
const num = 0;
if (num) {
  // this block is NOT executed because 0 is falsy
}

字串情境

如果加法運算子+用在原始型別的值上,而其中一個運算元是字串,另一個運算元也會被強制轉換成字串。轉換邏輯和使用String函式時相同。之後,這兩個字串會被串接起來。

let name;
'hello ' + name;
// => 'hello undefined'

數值情境

許多運算子會依照前面說明的Number函式邏輯,把運算元強制轉換成數字(如果有必要的話)。

  • 算術運算子:+(如果沒有牽涉到字串)、-、*、/、%、**
  • 一元加號與一元負號運算子:+、-
  • 關係運算子(用於非字串運算元):>、>=、<、<=
  • 位元運算子:|、&、^、~

想進一步了解這些運算子,請參考 MDN 運算子列表。

為了避免出錯,最好在套用這些運算子之前,一律明確呼叫Number。

說明

你的朋友 Kojo 非常喜歡數字。他有一個叫做「fun-with-numbers」的小網站。Kojo 的程式設計能力不太好,所以他請你幫忙。

你將為 Kojo 網站上的新數字遊戲打造兩個輔助函式,並再打造第三個函式,用來驗證使用者可以輸入的內容。

1. 計算吃角子老虎機上數字的總和

Kojo 網站上的其中一個遊戲看起來像吃角子老虎機,上面有兩組帶有數字的轉輪。每一組數字都代表一個數字。為了遊戲的運作機制,Kojo 需要知道這兩個數字的總和。

撰寫一個函式 twoSum,接受兩個陣列作為參數。每個陣列由一個或多個介於 0 到 9 之間的數字組成。這個函式應該將每個陣列解讀為一個數字,並回傳這兩個數字的總和。

twoSum([1, 2, 3], [0, 7]);
//=> 130

// [1, 2, 3] represents 123 and [0, 7] represents 7.
// 123 + 7 = 130

2. 判斷一個數字是否為迴文

網站上的另一個遊戲是一個叫做「Lucky Numbers」的小測驗。使用者可以輸入一個數字,然後看看這個數字是否屬於某個秘密的數列或模式。「幸運數字」的數列或模式每個月都會改變,而且每位使用者只有有限的嘗試次數可以猜出它。

這個月的幸運數字應該是迴文數字。迴文數字在把數字反轉之後仍然維持不變。

實作新的 luckyNumber 函式,接受一個數字作為參數。如果這個數字是迴文,函式應該回傳 true,否則回傳 false。輸入的數字永遠會是正整數。

luckyNumber(1441);
//=>  true

luckyNumber(123);
//=> false

3. 為無效的使用者輸入產生錯誤訊息

網站上有許多地方都有輸入欄位,使用者可以在裡面輸入數字,並點擊按鈕來觸發某些動作。Kojo 想改善他網站的使用者體驗。他希望在使用者點擊按鈕、但欄位中包含無效的輸入值時,顯示錯誤訊息。

以下是關於輸入欄位的值如何產生的一些進一步說明。

  • 如果使用者在欄位中輸入了一些內容,即使他只輸入了數字,相關的值永遠是字串。
  • 如果使用者輸入了內容但又把它刪掉,這個變數會是空字串。
  • 在使用者開始輸入之前,這個變數可能是 undefined 或 null。

撰寫一個函式 errorMessage,接受使用者輸入作為參數。如果使用者沒有提供任何輸入,errorMessage 應該回傳 'Required field'。如果輸入不代表非零數字(根據 JavaScript 的轉換規則),則應該回傳 'Must be a number besides 0'。在其他所有情況下,你可以假設輸入是有效的,回傳值應該是空字串。

errorMessage('123');
// => ''

errorMessage('');
// => 'Required field'

errorMessage('abc');
// => 'Must be a number besides 0'
透過 GitHub 編輯 連結會在新視窗或分頁中開啟
JavaScript Exercism

準備好開始 幸運數字 了嗎?

註冊 Exercism,透過 37 個概念159 個練習 和真人引導來學習並精通 JavaScript,全部免費。