Articles
JavaScript 簡介
JavaScript 的內建函數

JavaScript 的內建函數

本文介紹了 JavaScript 的內建函數。

YouTube Video

JavaScript 的內建函數

JavaScript 提供了多種內建函數，是高效編寫程式的強大工具。在這裡，我們將詳細介紹 JavaScript 中常見的內建函數。

什麼是內建函數？

內建函數是 JavaScript 中標準提供的函數。這些函數被設計來簡潔地執行特定任務。程式開發者無需自行實現它們，這提升了程式碼的可讀性和可維護性。

代表性的內建函數

parseInt() 

1// Convert string to integer
2console.log(parseInt("42"));      // Output: 42
3console.log(parseInt("42px"));    // Output: 42
4console.log(parseInt("0xF", 16)); // Output: 15
5console.log(parseInt("0xF"));     // Output: 15
6console.log(parseInt("px42"));    // Output: NaN

  • parseInt() 是一個解析字串並將其轉換為整數的函數。如果字串的開頭包含數字，該部分將被轉換為整數並返回。還可以指定可選的進位（基數）。

  • 如果字串的開頭不包含數字，則返回 NaN (非數字)。此外，如果未指定進位，則默認為十進位，但如果字串以 "0x" 開頭，則會被解釋為十六進位。

parseFloat() 

1// Convert string to float
2console.log(parseFloat("3.14"));      // Output: 3.14
3console.log(parseFloat("3.14abc"));   // Output: 3.14
4console.log(parseFloat("42"));        // Output: 42

  • parseFloat() 用於解析字串並將其轉換為浮點數。當處理包含小數點的數值時會使用此函數。

  • 與 parseInt() 類似，如果字串的開頭不是數字，則返回 NaN。其特點是能正確解析不僅是整數部分還包括小數部分。

isNaN() 

1console.log(isNaN(NaN));         // Output: true
2console.log(isNaN(42));          // Output: false
3console.log(isNaN("hello"));     // Output: true

  • isNaN() 用於判斷給定的值是否為 NaN。NaN (非數字) 表示無效的數字值。

  • isNaN() 對非數字類型的數據也有效，例如，如果字串無法轉換為數字，則會返回 true。

Number() 

1console.log(Number("42"));        // Output: 42
2console.log(Number("3.14"));      // Output: 3.14
3console.log(Number("0xff"));      // Output: 255
4console.log(Number("abc"));       // Output: NaN
5
6console.log(parseFloat("3.14abc"));  // Output: 3.14
7console.log(Number("3.14abc"));      // Output: NaN

  • Number() 是一個將字串或其他數據類型轉換為數字的函數。如果提供非數字的字串，會返回 NaN。

  • 與 parseInt() 或 parseFloat() 不同，Number() 認為包含非數字字元的字串是無效的轉換，因此返回 NaN。

String() 

1console.log(String(42));           // Output: "42"
2console.log(String(3.14));         // Output: "3.14"
3console.log(String(true));         // Output: "true"
4console.log(String(null));         // Output: "null"
5console.log(String(undefined));    // Output: "undefined"
  • String() 是一個將數字和其他資料類型轉換為字串的函數。String(42) 將返回字串 "42"。
  • 如果要轉換的值是 null 或 undefined，它將分別返回字串 "null" 或 "undefined"。
  • 通過將數據類型如數字、布林值或物件轉換為字串，這非常有用。

Array 

1const arr = Array(3);
2console.log(arr); // Output: [ <3 empty items> ]
3
4const arr2 = Array(1, 2, 3);
5console.log(arr2); // Output: [1, 2, 3]
  • Array 是用於創建新數組的建構函數。
  • 如果只有一個參數，它會被視為數組的長度，並創建一個空數組。
  • 如果有多個參數，則創建一個包含這些值作為元素的數組。

Array.isArray() 

1console.log(Array.isArray([1, 2, 3])); // Output: true
2console.log(Array.isArray("not an array")); // Output: false
  • Array.isArray() 是一個方法，用於判斷參數是否為數組。
  • 如果參數是數組，它會返回 true，否則返回 false。

isFinite() 

1console.log(isFinite(42));         // Output: true
2console.log(isFinite(Infinity));   // Output: false
3console.log(isFinite(NaN));        // Output: false

  • isFinite() 用於判斷給定的值是否為有限數。對於有限數字返回 true，否則返回 false（例如無窮大或 NaN）。

  • 在 JavaScript 中，Infinity 和 -Infinity 代表無窮大，且它們屬於數字類型，但 isFinite() 將無窮大視為無效值。

eval() 

1let expression = "2 + 2";
2console.log(eval(expression));    // Output: 4
3
4console.log(eval("var x = 10; x * 2"));  // Output: 20

  • eval() 是一個函式，用於評估和執行以字串形式給出的 JavaScript 程式碼。您可以動態執行 JavaScript 程式碼。

  • eval() 功能非常強大，但具有安全風險，因此應在實際開發中避免使用。使用 eval() 執行外部提供的程式碼可能導致意外行為和安全漏洞。

encodeURI() / decodeURI() 

1let url = "https://example.com/?name=John Doe&age=25";
2let encodedUrl = encodeURI(url);
3console.log(encodedUrl);
4// Output: https://example.com/?name=John%20Doe&age=25
5
6let decodedUrl = decodeURI(encodedUrl);
7console.log(decodedUrl);
8// Output: https://example.com/?name=John Doe&age=25

  • encodeURI() 是用於編碼（轉換）無法用於 URL 的字元的函式。另一方面，decodeURI() 則將已編碼的 URL 解碼為其原始形式。

  • 在處理特殊字元時，編碼特別重要。例如，像空格或 & 等字元需要被編碼才能正確包含在 URL 中，因此必須使用 encodeURI() 進行適當處理。

setTimeout() / setInterval() 

 1// Execute a function after 2 seconds
 2setTimeout(() => {
 3    console.log("This runs after 2 seconds");
 4}, 2000);
 5
 6// Execute a function every 1 second
 7let intervalId = setInterval(() => {
 8    console.log("This runs every 1 second");
 9}, 1000);
10
11// Stop the interval after 5 seconds
12setTimeout(() => {
13    clearInterval(intervalId);
14}, 5000);

  • setTimeout() 是一個計時器函式，用來在指定時間後執行一次函式。setInterval() 會以指定的間隔重複執行函式。

  • setTimeout() 和 setInterval() 是異步執行的，在指定時間過後調用函式。還可以使用 clearTimeout() 或 clearInterval() 取消執行。

總結

使用 JavaScript 的內建函式可以讓您撰寫更簡單且更高效的程式碼。此處介紹的功能是基本且在各種情況下非常實用的。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

JavaScript 中的空值合併運算符JavaScript 中的函式