JS-1: 變數與字串全解析

JS 是一種程式語言，它的功能為"替網頁提供互動功能與動態行為"，在本章節中，我們會先從最基本的變數與字串開始。

關於讀者的編輯環境，可以使用 vscode 、網路上也有許多編譯器可以直接運行程式碼，對於JS，你亦可以在瀏覽器中按下F12，在眾多選項卡中找到以下選項，命名一個檔案名稱，接著就可以直接撰寫程式碼，測試的話就直接 Ctrl + S 做存檔，接著再按下 Ctrl + Enter 就可以囉。

在 JaveScript 中，變數是一種命名的容器，用於儲存特定數據類型的數值。

• JavaScript 有以下幾種基本數據類型：
• • 數字（Number）：例如 1, 3.14, 42
  • 字串（String）：例如 "Hello", 'World'
  • 布林值（Boolean）：true 或 false
  • 未定義（Undefined）：變數宣告但未賦值時
  • 空值（Null）：「空」值
  • 符號（Symbol）：用於產生獨一無二的識別符
  • 物件（Object）：複合型別，包含屬性與方法

宣告變數

那我們要如何宣告變數呢?

• 我們使用let、const 關鍵字用來宣告變數。
• • 其中由const 宣告後的變數不可重新賦值。

// let 宣告變數
let age = 25;
age = 30; //age 的值變為30
console.log(age); // 輸出: 25

// const 宣告變數，賦值後不能修改
const thisIsConstValue = 3.14;
console.log(pi); // 輸出: 3.14

// 嘗試重新賦值 const 會引發錯誤
// pi = 3.14159; // 這行會引發 TypeError

• console.log()用來向主控台輸出訊息。
• // 表示註解，編譯器會忽略被註解的訊息，而善用註解可以幫助我們更好理解程式碼。
• thisIsConstValue 這種變數的命名方式大家要記住(首單字的字首為小寫，其餘為大寫開頭)，所有名稱較長的變數我們都應該如此命名，這是個好的習慣。
• 另外，變數的命名應避免使用關鍵字，像是 let const = 25; ，也要避免使用特殊字元，像是$，變數名稱中有空白當然也不行，還有一件事要注意，我們不能以數字開頭來命名變數，像是let 1stPlace = 100。
• const變數必須在宣告時初始化。也就是說一定要在宣告時賦值。
• 還有，分號;是一句程式語言的結束符號，要記得添加。

字串(String)

以下是如何宣告字串的語法:

// 字串型別
let greeting = "Hello, World!"; //也可以使用單引號包裹來創建字串
console.log(greeting); // 輸出: Hello, World!

關於字串很重要的一點是，字串有不可變的性質，這表示字串無法更改，也就是說你創建字串後，無法直接更改其內容。

以下是示範:

let student = "Bob";
student = "Michael";

• 上面的程式碼，其意義並不是直接更改變數的值，而是賦予變數一個新的字串。

好，接下來要提到的是字串的連接，像是將兩個字串片段連接起來，我們可以使用+號來連接，這是最簡單的方法，以下示範:

let firstValue = "Hello"
let lastValue = "World"
let fullValue = firstValue + " " + lastValue;  //字串的連接
console.log(fullValue) //Hello World
console.log(firstValue + " " + lastValue); //這種寫法也可以正確輸出資訊
console.log(firstValue,lastValue);  //這種寫法也可以正確輸出資訊

好，這邊補充一個檢查變數資料型別的運算子語法，名叫typeof，以下示範:

// 數字型別
let num = 42;
console.log(typeof num); // 輸出: number

// 字串型別
let greeting = "Hello, World!";
console.log(typeof greeting); // 輸出: string

// 布林值
let isJavaScriptFun = true;
console.log(typeof isJavaScriptFun); // 輸出: boolean

// 未定義
let undefinedVar;
console.log(typeof undefinedVar); // 輸出: undefined

// 空值
let nullVar = null;
console.log(typeof nullVar); // 輸出: object (這是 JavaScript 的一個特殊情況)

// 符號
let symbol1 = Symbol("unique");
console.log(typeof symbol1); // 輸出: symbol

// 物件
let person = { name: "Alice", age: 25 };
console.log(typeof person); // 輸出: object

好，接著我們要再對字串深入的了解，字串是由連續的字符組成，所以我們可以訪問字串中特定的字符，透過[索引]訪問，以下示範:

let greeting = "Hello";
console.log(greeting[0]); //輸出 H

• 索引是從0開始。

而如果今天你不知道字串最後一個字符的索引值，我們可以透過使用length屬性來獲得字串的長度，最後再減1就可以了。

let greeting = "Hello";
console.log(greeting[greeting.length - 1]); //輸出 o

另外，在 JavaScript 中，indexOf 是用於尋找字串或陣列中指定元素首次出現的位置的方法。如果該元素不存在，則會返回 -1。

let str = "Hello, world!";
console.log(str.indexOf("world")); // 輸出: 7
console.log(str.indexOf("o"));     // 輸出: 4（首次出現的位置）
console.log(str.indexOf("z"));     // 輸出: -1（不存在）
console.log(str.indexOf("o", 5));  // 輸出: 8（從索引 5 開始查找）

• indexOf是一種用於String對象的方法

好，我們接著再邁入下一個知識點，有時你會需要創建新行來輸出資訊，你可以使用”\\n” 來達成。

let greeting = "Hello\nWorld";
console.log(greeting);
/* 輸出
Hello
World
*/

有時在程式碼當中，你也會需要輸出一些特殊的字符，像是”，我們透過在這些特殊符號前添加\來讓程式碼正確輸出資訊。

let greeting = "Hello \"World\"";
console.log(greeting);  //輸出 Hello "World"

好，現在我們要提到一個非常方便靈活的字串處理方式，"字串插值”，它允許我們更輕鬆地進行字串的操作，包括直接在字串中嵌入變數，以下為語法:

let name = "Bob";
let greeting = `Hello, ${name}`;
console.log(greeting);  //輸出 Hello, Bob

• 字串插值正如你所見，字串的表示變為更加乾淨俐落。

另外，使用``包裹住的字串，會變為格式化輸出，等於說是你寫甚麼，它就會照著你寫的格式輸出資訊。

let greeting = `Hello,
How are "you"!`;
console.log(greeting);
/* 輸出
Hello,
How are "you"!
*/

好，我們接著來談談關於如何讀取用戶輸入，這邊跟字串也有點關聯，因為輸入的值是以字串形式存放到變數中的，這邊我們實際在瀏覽器中按下F12來開啟程式碼編輯環境來測試。

• prompt() 是一個瀏覽器內建的函式，用於顯示一個對話框，讓使用者輸入資料。
• 它返回使用者輸入的值（以字串形式），如果使用者按下「取消」，則返回 null

語法:

let userInput = prompt(message, defaultValue);

• message（可選）：顯示在對話框中的訊息。
• defaultValue（可選）：輸入框的預設值。

範例:

let name = prompt("What is your name?", "Guest");
console.log("Hello, " + name + "!");

let name = prompt("What is your name?", "Guest");
console.log(typeof name); //輸出 object 如果使用者按下取消

• 我們可以在底下看見輸出。

字串方法

1. charCodeAt()，將特定索引處的字母、數字、符號等字符變為 ASCII 數值的方法。

let letter = "A";
console.log(letter.charCodeAt(0)); // 輸出 65

letter = "Aa";
console.log(letter.charCodeAt(1));  // 輸出 97

letter = "!";
console.log(letter.charCodeAt(0)); // 輸出 33

2. fromCharCode() 將對應的 ASCII 數字轉換為字母、數字或符號。

let char = String.fromCharCode(65);
console.log(char); // 輸出 A

好，再介紹更多字串方法前，你一定會有所好奇方法究竟是甚麼，以上面的例子來看，這些看似能執行特定功能的方法，為甚麼在語法上卻有些許不同呢。

方法的定義

• 方法是一組具有特定功能的程式碼，可以被呼叫來執行。
• 方法可以有輸入參數（Input Parameters）和返回值（Return Value）。

來源

• 這些方法來自 JS 的類別庫，屬於不同的類別（Class）。

類別

• 類別是什麼？
• • 類別是一個用來定義物件屬性（Attributes）和行為（Behaviors）的模板。
  • 它描述了物件的結構和行為，而物件則是類別的實例。
• 物件與類別的關係
• • 類別是抽象的設計，物件是具體的實現。
  • 例如：類別 = 藍圖，而物件 = 依照藍圖建造的房子。
• 類別中的組成部分
• • 屬性（Attributes）：描述物件的資料，例如名稱、年齡。
  • 方法（Methods）：描述物件的功能或行為，例如計算、顯示資訊等。

而讀者要特別注意，如果語法為：類別名稱.方法名稱(參數) ，我們稱其為靜態方法（Static Method），像是以下所示。

let char = String.fromCharCode(65);

而與其相對的是實例方法，方法的呼叫需要仰賴物件，也就是說，建立物件後才能使用的方法稱為 “實例方法” ，像是以下所示。

let letter = "A";
console.log(letter.charCodeAt(0));

• letter 是 String 的實例。

好，目前讀者只要知道這些方法可以幫助我們方便的執行某些功能即可，我們接著繼續介紹更多的字串方法。

3. includes() ，檢查字串中是否包含特定的子字串，它返回一個布林值 (true 或 false)。

let str = "Hello, JavaScript world!";

console.log(str.includes("JavaScript")); // 輸出: true
console.log(str.includes("Python"));     // 輸出: false
console.log(str.includes("world", 15));  // 輸出: true (從索引 15 開始查找)
console.log(str.includes("world", 20));  // 輸出: false (索引超出範圍)

4. slice()，用於從字串或陣列中提取部分內容的方法，而不改變原始數據。它返回一個新的字串或陣列，包含指定範圍內的元素。

let str = "JavaScript is fun!";

// 提取 "JavaScript"
console.log(str.slice(0, 10)); // 輸出: "JavaScript"

// 提取到結尾
console.log(str.slice(11)); // 輸出: "is fun!"

// 提取 "fun"
console.log(str.slice(-4, -1)); // 輸出: "fun"

console.log(str.slice(-4)); // 輸出: "fun!"

console.log(str.slice());  //輸出: "JavaScript is fun!"

5. toUpperCase() and toLowerCase() ，將字串中的所有字元轉換為大寫或小寫。

let greeting = "Hello World";
let upperCaseGreeting = greeting.toUpperCase();
console.log(greeting);  //輸出 Hello World
console.log(upperCaseGreeting.toLowerCase());  //輸出 hello world

6. replace()，用於替換字串中的某個部分內容。此方法返回一個新字串，原始字串不會被修改。

let str = "Hello, world!";
let str2 = "Hello, world world!";
// 替換
let newStr = str.replace("world", "JavaScript");
let newStr2 = str.replace("World", "JavaScript");
let newStr3 = str2.replace("world", "JavaScript");
console.log(newStr); // 輸出: "Hello, JavaScript!"
console.log(newStr2); // 輸出: "Hello, world!" (區分大小寫，所以不替換)
console.log(newStr3); // 輸出: "Hello, JavaScript world!" (僅會取代第一次出現的搜尋值。)
console.log(str);    // 原始字串: "Hello, world!"

7. repeat()，用於重複字串指定次數的方法。它返回一個新字串，包含原字串重複指定次數的內容。

語法:

string.repeat(count)

count:

• 指定要重複的次數。
• 必須是 0 或正整數。
• 如果 count 是浮點數，會自動取整數部分。
• 若 count 為負數或無窮大，會拋出錯誤。

let str = "Hello";

// 重複 3 次
console.log(str.repeat(3)); // 輸出: "HelloHelloHello"

// 重複 0 次（返回空字串）
console.log(str.repeat(0)); // 輸出: ""

8. trim() ，用於刪除字串開頭和結尾的所有空格。包括空格、換行符 (\n)、 (\t) 等，返回一個新字串。此方法不會改變原始字串。

let str = "   Hello, World!\n";

console.log(str.trim());  // 輸出: "Hello, World!" 不換行
console.log(str.trimStart());  // 輸出: "Hello, World!" 換行
console.log(str.trimEnd());  //輸出: "   Hello, World!" 不換行
console.log(str);         // 原字串: "   Hello, World!" 換行

/* 主控台輸出
Hello, World!
Hello, World!

   Hello, World!
   Hello, World!
*/

目前有關字串方法的用法就先介紹到這邊。