JavaScript - 字串：初學者指南
你好，未來的 JavaScript 巫師們！今天，我們要深入探索 JavaScript 中的字串魔法世界。別擔心如果你之前從未寫過一行代碼 - 在這個教學結束之前，你將會像專家一樣串接代碼！我們開始吧！
什麼是字串？
在 JavaScript 中，字串是字符序列。它可以是字母、數字、符號，甚至是空格。把它們想像成你編程世界的文本。
例如：
let greeting = "Hello, World!";
let number = "42";
let symbol = "@#$%";這些都是字串，即使是數字！在 JavaScript 中，如果它在引號內，它就是字串。
語法
在 JavaScript 中創建字串簡直易如反掌。你可以使用單引號 ('')、雙引號 (""）甚至是反引號 (` `)。讓我們看一些例子：
let singleQuotes = '我是單引號字串';
let doubleQuotes = "我是雙引號字串";
let backticks = `而且我還是個字串！`;專業小貼士：反引號有一個特殊的超能力 - 它們允許我們嵌入式表達式。我們稍後會介紹！
JavaScript 字串對象屬性
JavaScript 中的字串帶有一些內置屬性。這就像它們有自己的身份證，上面有關於它們自己的信息。讓我們看看最常見的一個：
length
length 屬性告訴我們字串中有多少個字符。
let myName = "Alice";
console.log(myName.length); // 輸出：5在這裡，myName.length 是 5，因為 "Alice" 有 5 個字符。
JavaScript 字串對象方法
現在，讓我們看看字串能夠做到的一些酷炫技巧。這些被稱為方法，它們就像字串擁有的特殊能力。
這裡有一些常見的字串方法：
| 方法 | 描述 | 示例 |
|---|---|---|
| toUpperCase() | 將字串轉換為大寫 | "hello".toUpperCase() 返回 "HELLO" |
| toLowerCase() | 將字串轉換為小寫 | "WORLD".toLowerCase() 返回 "world" |
| trim() | 從兩端移除空格 | " hi ".trim() 返回 "hi" |
| charAt(index) | 返回指定索引的字符 | "hello".charAt(1) 返回 "e" |
| indexOf(substring) | 返回子字符串第一次出現的索引 | "hello".indexOf("l") 返回 2 |
| slice(start, end) | 提取字串的一部分 | "hello".slice(1, 4) 返回 "ell" |
| replace(old, new) | 用另一個值替換指定的值 | "hello".replace("h", "j") 返回 "jello" |
讓我們用一些例子來深入了解這些方法：
toUpperCase() 和 toLowerCase()
let shout = "hello".toUpperCase();
console.log(shout); // 輸出：HELLO
let whisper = "QUIET PLEASE".toLowerCase();
console.log(whisper); // 輸出：quiet please想像你在建立一個文本消息應用。這些方法可以對添加大寫鎖定功能或確保用戶名永遠存儲為小寫非常有用。
trim()
let untidy = " spruce up ";
let tidy = untidy.trim();
console.log(tidy); // 輸出："spruce up"當你處理用戶輸入時，這非常有用。用戶經常會不小心在文本的開頭或結尾添加空格。
charAt(index)
let word = "JavaScript";
console.log(word.charAt(4)); // 輸出：S記住，在編程中，我們從 0 開始計數，而不是 1。所以第 5 個字符在索引 4！
indexOf(substring)
let sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.indexOf("fox")); // 輸出：16這告訴我們 "fox" 從第 17 個字符開始（記住，我們從 0 開始計數）。
slice(start, end)
let fruit = "apple,banana,cherry";
let banana = fruit.slice(6, 12);
console.log(banana); // 輸出：bananaSlice 方法就像使用剪子從你的字串中剪出一部分。在這裡，我們從我們的水果字串中剪出了 "banana"。
replace(old, new)
let oldSaying = "The early bird catches the worm";
let newSaying = oldSaying.replace("worm", "success");
console.log(newSaying); // 輸出：The early bird catches the success這個方法非常適合對你的字串進行快速更改。
示例
讓我們將所有這些結合起來，用一個有趣的例子。想像我們正在建立一個簡單的名牌生成器：
function createNameTag(name, role) {
let upperName = name.toUpperCase();
let trimmedRole = role.trim();
let tag = `Hello, my name is ${upperName} and I am a ${trimmedRole}`;
return tag;
}
let myTag = createNameTag(" alice ", " developer ");
console.log(myTag); // 輸出：Hello, my name is ALICE and I am a developer在這個例子中，我們使用 toUpperCase() 來讓名字脫穎而出，使用 trim() 來移除任何意外的空格，並使用模板字面量（反引號）來輕鬆地組合我們的字串。
字串 HTML 包装器
JavaScript 還提供了將字串包在 HTML 標籤中的方法。這些在你使用 JavaScript 生成 HTML 內容時非常有用。這裡有一些：
let text = "加粗和美麗";
console.log(text.bold()); // 輸出：<b>加粗和美麗</b>
console.log(text.italics()); // 輸出：<i>加粗和美麗</i>
console.log(text.link("https://example.com")); // 輸出：<a href="https://example.com">加粗和美麗</a>然而，值得注意的是，這些方法已經被認為是過時的。在現代網頁開發中，通常更好直接操作 DOM 或使用框架。
這就是你進入 JavaScript 字串世界的第一步！記住，熟能生巧，所以不要害怕嘗試這些方法。在你還沒有意識到之前，你將會輕鬆地串接複雜的程式。快樂編程！
Credits: Image by storyset