4.1 字串介紹
在 JavaScript 裡，字串是字符的序列，也是基本的數據類型之一。 字串可以用 單引號 ('文字 '), 雙引號 ("文字"), 或 反引號 (`文字`) 來創建。
字串範例：
let singleQuote = 'Hello, World!';
let doubleQuote = "Hello, World!";
let backticks = `Hello, World!`;
字串對象可以調用的方法有：
| 方法 | 描述 |
|---|---|
| length | 返回字串的長度 |
| charAt(index) | 返回指定位置的字符 |
| toUpperCase() | 將字串轉換為大寫 |
| toLowerCase() | 將字串轉換為小寫 |
| indexOf(substring) | 返回子字串的第一個索引或-1，如果未找到 |
| includes(substring) | 檢查字串是否包含指定的子字串, 返回 true 或 false |
| slice(start, end) | 提取字串的一部分並返回新字串 |
| replace(searchValue, newValue) | 將指定的子字串替換為新子字串 |
| split(separator) | 使用指定的分隔符將字串拆分為子字串數組 |
| trim() | 刪除字串開頭和結尾的空白 |
4.2 字串操作的基本方法
方法使用範例
1. length 屬性
返回字串的長度：
let str = 'Hello';
console.log(str.length); // 5
2. charAt(index) 方法
返回指定位置的字符：
let str = 'Hello';
let result = str.charAt(1);
console.log(result); // 'e'
3. toUpperCase() 和 toLowerCase() 方法：
將字串轉換為大寫或小寫：
let str = 'Hello';
console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'
4. indexOf(substring) 方法
返回子字串的第一個索引或-1，如果未找到：
let str = 'Hello, world!';
let result = str.indexOf('world');
console.log(result); // 7
5. includes(substring) 方法
檢查字串是否包含指定的子字串, 返回 true 或 false：
let str = 'Hello, world!';
let result = str.includes('world');
console.log(result); // true
6. trim() 方法
刪除字串開頭和結尾的空白：
let str = ' Hello, world! ';
console.log(str.trim()); // 'Hello, world!'
7. replace(searchValue, newValue) 方法
將指定的子字串替換為新子字串：
let str = 'Hello, world!';
console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'
8. split(separator) 方法
使用指定的分隔符將字串拆分為子字串數組：
let str = 'Hello, world!';
let words = str.split(' ');
console.log(words); // ['Hello,', 'world!']
9. substring(start, end) 方法
返回兩個索引之間的子字串：
let str = 'Hello, world!';
console.log(str.substring(0, 5)); // 'Hello'
10. substr(start, length) 方法
從指定索引開始返回長度相等於指定字符數的子字串：
let str = 'Hello, world!';
console.log(str.substr(0, 5)); // 'Hello'
11. slice(start, end) 方法
提取字串的一部分並返回新字串：
let str = 'Hello, world!';
console.log(str.slice(0, 5)); // 'Hello'
12. startsWith(substring) 方法
檢查字串是否以指定子字串開始, 返回 true 或 false：
let str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
13. endsWith(substring) 方法
檢查字串是否以指定子字串結束, 返回 true 或 false：
let str = 'Hello, world!';
console.log(str.endsWith('world!')); // true
14. repeat(count) 方法
返回包含指定數量原始字串副本的新字串：
let str = 'Hello';
console.log(str.repeat(3)); // 'HelloHelloHello'
let str2 = '-';
console.log(str2.repeat(30)); // '---------------------------------------------------------------'
4.3 新世代字串
模板字串 (template strings) 是最近在 JavaScript 中引入的。與普通字串相比，它們提供了更方便和更易讀的文本操作方式。它們使用反引號 (`) 來書寫，支持表達式插值和多行文本。
語法：
`新世代字串`
範例：
模板字面量 greeting 是用反引號創建的。
const greeting = `Hello, World!`;
console.log(greeting); // "Hello, World!"
模板字串的主要特點：
- 表達式插值：模板字串允許使用
${}在字串中插入表達式和變數 - 多行文本：模板字串支持多行文本，無需使用特殊字符來進行換行
- 內嵌表達式：模板字串內可以使用任何 JavaScript 表達式，包括函數
讓我們看看使用模板字串的範例。
表達式插值
模板字串允許輕鬆地在字串中插入變數的值和表達式的結果：
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Alice! You are 30 years old."
在這個例子中，變數 name 和 age 是用 ${} 插入到字串中的。
多行文本
模板字串使得創建多行字串更加方便，無需使用
換行符 (\n)：
let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
Sit lorem mattis eget maximus.`;
console.log(multiLine);
內嵌表達式
在模板字串中可以使用任何 JavaScript 表達式，包括函數調用：
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."
function getGreeting(name) {
return `Hello, ${name}!`;
}
let greeting = `${getGreeting("Bob")}`;
console.log(greeting); // "Hello, Bob!"
當然最好不要在字串內調用函數，但如果真的想，也不是不可以。
GO TO FULL VERSION