TypeScript中string类型的操作技巧
字符串基本操作
在 TypeScript 中，string 类型是用于表示文本的数据类型。与 JavaScript 类似，TypeScript 为 string 类型提供了丰富的操作方法。
字符串拼接
字符串拼接是最常见的操作之一。在 TypeScript 中，可以使用 + 运算符或模板字面量来实现字符串的拼接。
使用 + 运算符拼接字符串：
let firstName: string = 'John';
let lastName: string = 'Doe';
let fullName: string = firstName + ' ' + lastName;
console.log(fullName);
上述代码通过 + 运算符将 firstName、空格和 lastName 拼接在一起，得到完整的姓名。
使用模板字面量拼接字符串：
let firstName: string = 'Jane';
let lastName: string = 'Smith';
let fullName: string = `${firstName} ${lastName}`;
console.log(fullName);
模板字面量使用反引号（`）来定义字符串，可以在其中嵌入表达式，使代码更加简洁和易读。
获取字符串长度
可以使用 length 属性来获取字符串的长度，即字符串中字符的个数。
let message: string = 'Hello, world!';
let length: number = message.length;
console.log(length);
上述代码输出 13，因为 'Hello, world!' 包含 13 个字符（包括逗号和空格）。
字符串查找与匹配
查找子字符串
TypeScript 提供了多种方法来查找字符串中的子字符串。
indexOf 方法：返回指定子字符串在字符串中第一次出现的位置，如果不存在则返回 -1。
let sentence: string = 'The quick brown fox jumps over the lazy dog';
let position: number = sentence.indexOf('fox');
console.log(position);
上述代码输出 16，表示 'fox' 在字符串中第一次出现的位置是 16。
lastIndexOf 方法：返回指定子字符串在字符串中最后一次出现的位置，如果不存在则返回 -1。
let text: string = 'banana';
let lastPosition: number = text.lastIndexOf('a');
console.log(lastPosition);
这里输出 5，因为 'a' 在 'banana' 中最后一次出现的位置是 5。
includes 方法：用于判断字符串是否包含指定的子字符串，返回 true 或 false。
let phrase: string = 'JavaScript is awesome';
let containsJs: boolean = phrase.includes('JavaScript');
console.log(containsJs);
这段代码输出 true，表明 phrase 字符串包含 'JavaScript'。
正则表达式匹配
正则表达式在字符串匹配中非常强大。TypeScript 支持使用正则表达式进行字符串匹配。
match 方法：用于在字符串中查找匹配正则表达式的内容，并返回一个数组，包含所有匹配的子字符串。
let text: string = 'There are 3 apples and 2 oranges';
let pattern: RegExp = /\d+/g;
let matches: string[] | null = text.match(pattern);
console.log(matches);
上述代码使用正则表达式 /\d+/g 匹配字符串中的所有数字，g 标志表示全局匹配。match 方法返回 ['3', '2']。
search 方法：返回字符串中第一个匹配正则表达式的位置，如果没有匹配则返回 -1。
let sentence: string = 'The price is $10.99';
let position: number = sentence.search(/\$\d+\.\d{2}/);
console.log(position);
这里使用正则表达式 /\$\d+\.\d{2}/ 查找价格格式，search 方法返回 10，即价格 $10.99 在字符串中第一次出现的位置。
replace 方法：用于替换字符串中匹配正则表达式的部分。
let text: string = 'Hello, world! Hello, TypeScript!';
let newText: string = text.replace(/Hello/g, 'Hi');
console.log(newText);
通过正则表达式 /Hello/g，replace 方法将字符串中所有的 Hello 替换为 Hi，输出 Hi, world! Hi, TypeScript!。
字符串转换与格式化
大小写转换
TypeScript 提供了方法来转换字符串的大小写。
toUpperCase 方法：将字符串转换为大写。
let lowercaseText: string = 'hello, world';
let uppercaseText: string = lowercaseText.toUpperCase();
console.log(uppercaseText);
上述代码将 'hello, world' 转换为 'HELLO, WORLD'。
toLowerCase 方法：将字符串转换为小写。
let uppercaseText: string = 'HELLO, WORLD';
let lowercaseText: string = uppercaseText.toLowerCase();
console.log(lowercaseText);
这里将 'HELLO, WORLD' 转换为 'hello, world'。
去除空白字符
字符串两端的空白字符（空格、制表符等）有时需要去除，TypeScript 提供了相关方法。
trim 方法：去除字符串两端的空白字符。
let textWithWhitespace: string = ' hello, world ';
let trimmedText: string = textWithWhitespace.trim();
console.log(trimmedText);
上述代码输出 'hello, world'，两端的空白字符被去除。
trimStart 方法：只去除字符串开头的空白字符。
let textWithLeadingWhitespace: string = ' hello, world';
let trimmedStartText: string = textWithLeadingWhitespace.trimStart();
console.log(trimmedStartText);
这里输出 'hello, world'，只去除了开头的空白字符。
trimEnd 方法：只去除字符串结尾的空白字符。
let textWithTrailingWhitespace: string = 'hello, world ';
let trimmedEndText: string = textWithTrailingWhitespace.trimEnd();
console.log(trimmedEndText);
此代码输出 'hello, world'，只去除了结尾的空白字符。
字符串填充
有时候需要在字符串的开头或结尾填充特定字符以达到一定的长度。
padStart 方法：在字符串开头填充指定字符，直到达到指定长度。
let number: string = '5';
let paddedNumber: string = number.padStart(3, '0');
console.log(paddedNumber);
上述代码将 '5' 填充为 '005'，使用 '0' 填充，使长度达到 3。
padEnd 方法：在字符串结尾填充指定字符，直到达到指定长度。
let text: string = 'Hello';
let paddedText: string = text.padEnd(10, '!');
console.log(paddedText);
这里将 'Hello' 填充为 'Hello!!!!!，使用 '!' 填充，使长度达到 10。
字符串分割与连接
字符串分割
split 方法用于将字符串按照指定的分隔符分割成一个字符串数组。
按字符分割：
let sentence: string = 'Hello, world';
let words: string[] = sentence.split(', ');
console.log(words);
上述代码通过 ', ' 作为分隔符，将字符串分割为 ['Hello', 'world']。
按固定长度分割：
let longText: string = '1234567890';
let parts: string[] = [];
for (let i = 0; i < longText.length; i += 3) {
parts.push(longText.slice(i, i + 3));
}
console.log(parts);
这段代码将长度为 10 的字符串 '1234567890' 按每 3 个字符分割，得到 ['123', '456', '789', '0']。
字符串连接
join 方法用于将字符串数组连接成一个字符串，使用指定的分隔符。
let words: string[] = ['Hello', 'world'];
let sentence: string = words.join(', ');
console.log(sentence);
上述代码将数组 ['Hello', 'world'] 连接成 'Hello, world'，使用 ', ' 作为分隔符。
字符串与其他类型的转换
字符串转数字
在 TypeScript 中，可以将字符串转换为数字。
parseInt 函数：将字符串解析为整数。
let numStr1: string = '123';
let num1: number = parseInt(numStr1);
console.log(num1);
上述代码将 '123' 解析为数字 123。
parseFloat 函数：将字符串解析为浮点数。
let numStr2: string = '3.14';
let num2: number = parseFloat(numStr2);
console.log(num2);
这里将 '3.14' 解析为数字 3.14。
数字转字符串
toString 方法：将数字转换为字符串。
let num: number = 42;
let numStr: string = num.toString();
console.log(numStr);
上述代码将数字 42 转换为字符串 '42'。
String 函数：也可以将数字转换为字符串。
let num3: number = 100;
let numStr3: string = String(num3);
console.log(numStr3);
此代码同样将数字 100 转换为字符串 '100'。
字符串的遍历与迭代
使用 for 循环遍历字符串
可以使用传统的 for 循环来遍历字符串中的每个字符。
let text: string = 'TypeScript';
for (let i = 0; i < text.length; i++) {
console.log(text[i]);
}
上述代码会依次输出 'T', 'y', 'p', 'e', 'S', 'c', 'r', 'i', 'p', 't'。
使用 for...of 循环遍历字符串
for...of 循环提供了更简洁的方式来遍历可迭代对象，字符串也是可迭代的。
let text2: string = 'Hello';
for (let char of text2) {
console.log(char);
}
这里同样会依次输出 'H', 'e', 'l', 'l', 'o'。
字符串的高级操作技巧
处理多字节字符
在处理包含多字节字符（如中文、日文、韩文等）的字符串时，需要注意一些特殊情况。JavaScript 和 TypeScript 的字符串是以 UTF - 16 编码存储的，对于一些代理对表示的字符，传统的按索引访问和长度计算可能会出现问题。
例如，对于一个 emoji 字符，它可能由两个 UTF - 16 代码单元组成：
let emoji: string = '😀';
console.log(emoji.length);
上述代码输出 2，但实际上这个 emoji 是一个字符。为了正确处理多字节字符，可以使用 String.prototype.codePointAt 方法。
let emoji2: string = '😀';
let codePoint: number = emoji2.codePointAt(0)!;
console.log(codePoint);
这里 codePointAt(0) 返回 128512，这是 '😀' 的 Unicode 码点。
字符串的本地化处理
在全球化应用中，字符串的本地化处理非常重要。例如，日期、时间、数字和货币等的格式化可能因地区而异。
TypeScript 可以借助 Intl 对象来实现本地化处理。例如，格式化数字：
let number: number = 123456.789;
let options: Intl.NumberFormatOptions = {
style: 'decimal',
minimumFractionDigits: 2,
maximumFractionDigits: 2
};
let formatter: Intl.NumberFormat = new Intl.NumberFormat('en - US', options);
let formattedNumber: string = formatter.format(number);
console.log(formattedNumber);
上述代码将数字 123456.789 格式化为 '123,456.79'，符合美国英语的数字格式。
字符串的安全性与防范注入攻击
在处理用户输入的字符串时，安全性是至关重要的。例如，在 Web 开发中，需要防范 SQL 注入、XSS（跨站脚本攻击）等。
对于 SQL 注入防范，在使用数据库查询时，应避免直接拼接用户输入的字符串到 SQL 语句中，而是使用参数化查询。假设使用 Node.js 和 MySQL 数据库：
const mysql = require('mysql2');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'test'
});
let username: string = 'user';
let password: string = 'pass';
let query = 'SELECT * FROM users WHERE username =? AND password =?';
connection.query(query, [username, password], (err, results) => {
if (err) throw err;
console.log(results);
});
上述代码使用参数化查询，避免了用户输入的字符串直接嵌入 SQL 语句，从而防范了 SQL 注入攻击。
对于 XSS 防范，在将用户输入显示到网页上时，应进行适当的转义。例如，在使用 React 时，可以使用 DOMPurify 库：
import DOMPurify from 'dompurify';
let userInput: string = '<script>alert("XSS")</script>';
let safeInput: string = DOMPurify.sanitize(userInput);
// 在 React 组件中使用 safeInput 显示到页面
通过 DOMPurify.sanitize 方法，将用户输入中的恶意脚本标签进行了清理，防止了 XSS 攻击。
字符串在函数与模块中的应用
字符串作为函数参数与返回值
在 TypeScript 函数中，字符串常被用作参数和返回值。
作为参数：
function greet(name: string): string {
return `Hello, ${name}!`;
}
let message: string = greet('John');
console.log(message);
上述 greet 函数接受一个字符串参数 name，并返回一个拼接后的问候字符串。
作为返回值：
function getErrorMessage(errorCode: number): string {
switch (errorCode) {
case 404:
return 'Not Found';
case 500:
return 'Internal Server Error';
default:
return 'Unknown Error';
}
}
let errorMessage: string = getErrorMessage(404);
console.log(errorMessage);
这里 getErrorMessage 函数根据传入的错误代码返回相应的错误信息字符串。
字符串在模块中的使用
在 TypeScript 模块中，字符串可以用于导出常量、函数等。
例如，创建一个 strings.ts 模块：
export const HELLO_MESSAGE: string = 'Hello';
export function sayHello(name: string): string {
return `${HELLO_MESSAGE}, ${name}!`;
}
在另一个模块中导入并使用：
import { HELLO_MESSAGE, sayHello } from './strings';
console.log(HELLO_MESSAGE);
let greeting: string = sayHello('Jane');
console.log(greeting);
上述代码从 strings.ts 模块中导入字符串常量 HELLO_MESSAGE 和函数 sayHello，并进行使用。
总结字符串操作的最佳实践
- 使用模板字面量进行字符串拼接：模板字面量使代码更易读，并且支持嵌入表达式，比
+运算符拼接更方便。 - 合理使用字符串查找与匹配方法：根据具体需求选择
indexOf、includes、正则表达式等方法，提高查找和匹配的效率。 - 注意字符串转换的安全性：在字符串与其他类型转换时，要注意输入的合法性，防止转换失败或引发错误。
- 防范字符串相关的安全风险：如 SQL 注入、XSS 等，采用合适的方法进行防范，确保应用的安全性。
- 遵循代码风格一致性：在字符串操作中，保持代码风格的一致性，例如在字符串格式化、大小写转换等操作上遵循团队或项目的规范。
通过掌握以上 TypeScript 中 string 类型的操作技巧，可以更加高效、安全地处理文本数据，提升代码的质量和可读性。无论是开发 Web 应用、命令行工具还是其他类型的软件，对字符串的熟练操作都是必不可少的技能。