基础入门
字符串操作
深入学习字符串方法、模板字面量、正则
字符串操作
JavaScript 字符串处理非常灵活，从模板字面量到丰富的内置方法。
学完本章你将： 掌握字符串创建、模板字面量、常用方法。
创建字符串
javascript
// 三种引号
let s1 = "双引号";
let s2 = '单引号';
let s3 = `模板字面量（ES6）`;
// 模板字面量支持插值和换行
let name = "Alice";
let greeting = `你好，${name}！
欢迎来到 JavaScript 世界。`;
console.log(greeting);
// 你好，Alice！
// 欢迎来到 JavaScript 世界。常用方法
javascript
let str = " Hello World! ";
// 长度
console.log(str.length); // 16
// 大小写转换
console.log(str.toUpperCase()); // " HELLO WORLD! "
console.log(str.toLowerCase()); // " hello world! "
// 去除空白
console.log(str.trim()); // "Hello World!"
console.log(str.trimStart()); // "Hello World! "
console.log(str.trimEnd()); // " Hello World!"
// 查找
console.log(str.includes("World")); // true
console.log(str.indexOf("World")); // 8
console.log(str.startsWith(" He")); // true
console.log(str.endsWith("! ")); // true提取与分割
javascript
let str = "JavaScript";
// 切片
console.log(str.slice(0, 4)); // "Java"
console.log(str.slice(4)); // "Script"
console.log(str.slice(-6)); // "Script"（从末尾数）
// 取字符
console.log(str.charAt(0)); // "J"
console.log(str[0]); // "J"（推荐）
// 分割与拼接
let csv = "apple,banana,orange";
let arr = csv.split(",");
console.log(arr); // ["apple", "banana", "orange"]
console.log(arr.join(" | ")); // "apple | banana | orange"替换与填充
javascript
let str = "Hello World World";
console.log(str.replace("World", "JS")); // "Hello JS World"（只替换第一个）
console.log(str.replaceAll("World", "JS")); // "Hello JS JS"（ES2021）
// 填充
console.log("7".padStart(3, "0")); // "007"
console.log("abc".padEnd(6, ".")); // "abc..."模板字面量进阶
javascript
// 表达式插值
let a = 10, b = 20;
console.log(`${a} + ${b} = ${a + b}`); // "10 + 20 = 30"
// 多行字符串
let html = `
<div class="card">
<h2>标题</h2>
<p>内容</p>
</div>`;
// 标签模板
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
result + str + (values[i] ? `**${values[i]}**` : ""), "");
}
console.log(highlight`价格：${99}元`); // "价格：**99**元"