JavaScript 第九章（JavaScript字符串操作全攻略）
字符串在前端开发中扮演着极其重要的角色，无论是在用户界面展示、数据请求还是日常的逻辑处理中，都离不开对字符串的各种操作。在这篇文章中，我们将深入探讨JavaScript中的字符串知识点，并通过示例代码来加深理解。
首先，我们来认识JavaScript中的字符串。字符串可以由单引号(')、双引号(")或模板字面量(`)定义，它们可以包含零个或多个字符。
let singleQuoted = 'Hello, World!';
let doubleQuoted = "Hello, World!";
let templateLiteral = `Hello, World!`;
接下来，我们将逐一探讨字符串的常见操作：
字符串连接
字符串可以使用加号(+)来进行连接。
let greeting = "Hello, " + "World!";
console.log(greeting); // 输出: Hello, World!
字符串长度
使用.length属性可以获取字符串的长度。
let length = greeting.length;
console.log(length); // 输出: 13
访问字符串中的字符
可以使用方括号([])或.charAt()方法来访问特定位置的字符。
let firstChar = greeting[0];
let secondChar = greeting.charAt(1);
console.log(firstChar); // 输出: H
console.log(secondChar); // 输出: e
字符串切割
.slice(start, end)方法可以用来切割字符串，返回一个新的字符串。
let sliced = greeting.slice(0, 5);
console.log(sliced); // 输出: Hello
字符串替换
.replace(searchFor, replaceWith)方法用于替换字符串中的内容。
let replaced = greeting.replace("World", "JavaScript");
console.log(replaced); // 输出: Hello, JavaScript!
字符串转换
.toUpperCase()和.toLowerCase()方法可以将字符串转换为大写或小写。
let upper = greeting.toUpperCase();
let lower = greeting.toLowerCase();
console.log(upper); // 输出: HELLO, WORLD!
console.log(lower); // 输出: hello, world!
字符串去除空白
.trim()方法可以去除字符串两端的空白字符。
let untrimmed = " Hello, World! ";
let trimmed = untrimmed.trim();
console.log(trimmed); // 输出: Hello, World!
字符串分割
.split(separator)方法可以将字符串按照指定的分隔符分割成数组。
let splitted = greeting.split(", ");
console.log(splitted); // 输出: ["Hello", "World!"]
字符串搜索
.indexOf(substring)方法可以返回子字符串在字符串中首次出现的索引，如果没有找到则返回-1。
let index = greeting.indexOf("World");
console.log(index); // 输出: 7
模板字面量
模板字面量是ES6引入的特性，允许字符串嵌入表达式。
let name = "World";
let templateGreeting = `Hello, ${name}!`;
console.log(templateGreeting); // 输出: Hello, World!
正则表达式匹配
.match(regexp)方法可以在字符串中执行正则表达式匹配，返回匹配结果数组。
let regex = /[A-Z]/g;
let matches = greeting.match(regex);
console.log(matches); // 输出: ["H", "W"]
字符编码
JavaScript 使用 Unicode 字符集。.charCodeAt(index)方法可以返回表示给定索引处字符的UTF-16代码单元值。
let charCode = greeting.charCodeAt(0);
console.log(charCode); // 输出: 72
构造字符串
String.fromCharCode(num1, ..., numN)静态方法可以根据指定的Unicode值创建字符串。
let charString = String.fromCharCode(72, 101, 108, 108, 111);
console.log(charString); // 输出: Hello
字符串包含关系
.includes(substring)方法用来判断一个字符串是否包含另一个字符串。
let contains = greeting.includes("Hello");
console.log(contains); // 输出: true
字符串开始和结束
.startsWith(substring)和.endsWith(substring)方法用来判断字符串的开始和结束部分是否匹配指定的子字符串。
let startsWithHello = greeting.startsWith("Hello");
let endsWithWorld = greeting.endsWith("World!");
console.log(startsWithHello); // 输出: true
console.log(endsWithWorld); // 输出: true
重复字符串
.repeat(count)方法可以将字符串重复指定次数，返回一个新的字符串。
let repeated = "hello ".repeat(3);
console.log(repeated); // 输出: hello hello hello
字符串插值
除了模板字面量，你还可以使用字符串拼接的方式进行字符串插值。
let userName = "Alice";
let interpolated = "Hello, " + userName + "!";
console.log(interpolated); // 输出: Hello, Alice!
正则表达式替换
.replace(regexp, newSubstr)方法不仅可以替换字符串，还可以使用正则表达式进行模式匹配替换。
let regexReplace = greeting.replace(/Hello/g, "Hi");
console.log(regexReplace); // 输出: Hi, World!
正则表达式搜索
.search(regexp)方法可以使用正则表达式来搜索字符串，并返回匹配的位置索引。
let regexSearch = greeting.search(/[A-Z]/);
console.log(regexSearch); // 输出: 0
字符串比较
.localeCompare(otherString)方法可以用来比较两个字符串在本地排序的位置。
let comparison = "a".localeCompare("b");
console.log(comparison); // 输出: -1 (因为 "a" 在 "b" 前面)
HTML包装
当你需要将字符串用作HTML内容时，可能需要对其进行包装。例如，你可以创建一个函数来将文本转换为列表项。
function toListItem(text) {
return `${text}`;
}
console.log(toListItem("Item")); // 输出: Item
字符串和数组的转换
有时候，你可能需要将字符串转换为字符数组，或者将字符数组合并为字符串。
let charArray = greeting.split('');
let stringFromArray = charArray.join('');
console.log(charArray); // 输出: ["H", "e", "l", "l", "o", ",", " ", "W", "o", "r", "l", "d", "!"]
console.log(stringFromArray); // 输出: Hello, World!
原始字符串
在JavaScript中，可以使用String.raw方法获取一个字符串的原始字面量形式，这在处理转义字符时非常有用。
let rawString = String.raw`Line1\nLine2`;
console.log(rawString); // 输出: Line1\nLine2
字符串迭代
ES6引入了对字符串的迭代器支持，这意味着你可以使用for...of循环来遍历字符串中的每个字符。
for (let char of greeting) {
console.log(char);
}
// 输出:
// H
// e
// l
// l
// o
// ,
//
// W
// o
// r
// l
// d
// !
模板字面量标签函数
模板字面量可以与标签函数结合使用，这允许你解析模板字面量中的数据。
function tag(strings, ...values) {
console.log(strings);
console.log(values);
return 'Processed template literal';
}
let person = 'World';
let taggedResult = tag`Hello, ${person}!`;
console.log(taggedResult); // 输出: Processed template literal
字符串填充
.padStart(targetLength [, padString])和.padEnd(targetLength [, padString])方法可以用来在字符串的开始或结束填充字符，直到字符串达到指定的长度。
let paddedStart = "5".padStart(3, "0");
let paddedEnd = "5".padEnd(3, "0");
console.log(paddedStart); // 输出: 005
console.log(paddedEnd); // 输出: 500
字符串和数字的转换
有时候你需要将字符串转换为数字，或者反过来。可以使用parseInt, parseFloat或者Number对象进行转换。
let numFromString = parseInt("42");
let stringFromNum = numFromString.toString();
console.log(numFromString); // 输出: 42
console.log(stringFromNum); // 输出: "42"
字符串编码和解码
encodeURIComponent和decodeURIComponent函数可以用来对URL组件进行编码和解码。
let encoded = encodeURIComponent("Hello, World!");
let decoded = decodeURIComponent(encoded);
console.log(encoded); // 输出: Hello%2C%20World%21
console.log(decoded); // 输出: Hello, World!
Base64编码和解码
btoa和atob函数可以用来进行Base64编码和解码操作。
let base64Encoded = btoa("Hello, World!");
let base64Decoded = atob(base64Encoded);
console.log(base64Encoded); // 输出: SGVsbG8sIFdvcmxkIQ==
console.log(base64Decoded); // 输出: Hello, World!
多行字符串
在ES6之前，创建多行字符串通常需要使用反斜杠(\)或者连接多个字符串。现在，模板字面量使得创建多行字符串变得简单。
let multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);
// 输出:
// This is a string
// that spans across
// multiple lines.
国际化和本地化
Intl对象提供了语言敏感的字符串比较、数字格式化和日期时间格式化。Intl.Collator对象可以用来进行字符串比较。
let collator = new Intl.Collator('en');
let comparisonResult = collator.compare('a', 'c');
console.log(comparisonResult); // 输出: -1 (因为 'a' 在 'c' 前面)