TypeScript 字符串完全指南
编程小白也能理解的字符串知识点汇总 – 详细解析与实用示例
字符串基础知识
什么是字符串?
字符串就是一系列字符的组合,可以包含字母、数字、符号和空格。在TypeScript中,字符串用单引号(”)、双引号(“”)或反引号(“)包围。
// 声明字符串的三种方式
let singleQuote: string = ‘Hello’;
let doubleQuote: string = “World”;
let backtick: string = `TypeScript`;
let singleQuote: string = ‘Hello’;
let doubleQuote: string = “World”;
let backtick: string = `TypeScript`;
小贴士: 使用反引号可以创建模板字符串,允许嵌入表达式和跨行文本
字符串连接
连接字符串就是把多个字符串拼接成一个。可以使用 + 运算符或者模板字符串。
// 使用 + 运算符连接
let fullName: string = “张” + “三”; // 结果: “张三”
// 使用模板字符串连接
let firstName: string = “李”;
let lastName: string = “四”;
let fullName2: string = `${firstName}${lastName}`; // 结果: “李四”
let fullName: string = “张” + “三”; // 结果: “张三”
// 使用模板字符串连接
let firstName: string = “李”;
let lastName: string = “四”;
let fullName2: string = `${firstName}${lastName}`; // 结果: “李四”
实际应用: 构建动态消息
let age: number = 25;
let message: string = `我叫${fullName2},今年${age}岁。`;
let age: number = 25;
let message: string = `我叫${fullName2},今年${age}岁。`;
字符串操作与方法
获取字符串长度
使用 .length 属性可以获取字符串包含的字符数量。
let text: string = “TypeScript真强大!”;
let length: number = text.length; // 结果: 13
let length: number = text.length; // 结果: 13
注意: 中文字符和英文字符一样,每个都算作一个长度单位
访问字符
可以使用索引(从0开始的位置)访问字符串中的单个字符。
let language: string = “JavaScript”;
// 获取第一个字符
let firstChar: string = language[0]; // ‘J’
// 使用 charAt 方法
let thirdChar: string = language.charAt(2); // ‘v’
// 获取最后一个字符
let lastChar: string = language[language.length – 1]; // ‘t’
// 获取第一个字符
let firstChar: string = language[0]; // ‘J’
// 使用 charAt 方法
let thirdChar: string = language.charAt(2); // ‘v’
// 获取最后一个字符
let lastChar: string = language[language.length – 1]; // ‘t’
重要: 如果索引超出范围,返回 undefined(使用[])或空字符串(使用charAt)
查找与搜索
在字符串中查找内容可以使用这些方法:
let sentence: string = “TypeScript是JavaScript的超集”;
// 检查是否包含子字符串
let hasScript: boolean = sentence.includes(“Script”); // true
// 查找子字符串位置
let scriptPosition: number = sentence.indexOf(“Script”); // 4
// 从后往前查找
let lastScript: number = sentence.lastIndexOf(“Script”); // 4(只有一个)
// 检查是否以特定文本开头/结尾
let starts: boolean = sentence.startsWith(“Type”); // true
let ends: boolean = sentence.endsWith(“超集”); // true
// 检查是否包含子字符串
let hasScript: boolean = sentence.includes(“Script”); // true
// 查找子字符串位置
let scriptPosition: number = sentence.indexOf(“Script”); // 4
// 从后往前查找
let lastScript: number = sentence.lastIndexOf(“Script”); // 4(只有一个)
// 检查是否以特定文本开头/结尾
let starts: boolean = sentence.startsWith(“Type”); // true
let ends: boolean = sentence.endsWith(“超集”); // true
修改字符串内容
字符串本身不能被修改,但可以创建修改后的新字符串。
let original: string = “Hello, World!”;
// 转换为大写
let upper: string = original.toUpperCase(); // “HELLO, WORLD!”
// 转换为小写
let lower: string = original.toLowerCase(); // “hello, world!”
// 替换内容
let replaced: string = original.replace(“World”, “TypeScript”);
// “Hello, TypeScript!”
// 删除两端空白
let withSpaces: string = ” 前后有空格 “;
let trimmed: string = withSpaces.trim(); // “前后有空格”
// 转换为大写
let upper: string = original.toUpperCase(); // “HELLO, WORLD!”
// 转换为小写
let lower: string = original.toLowerCase(); // “hello, world!”
// 替换内容
let replaced: string = original.replace(“World”, “TypeScript”);
// “Hello, TypeScript!”
// 删除两端空白
let withSpaces: string = ” 前后有空格 “;
let trimmed: string = withSpaces.trim(); // “前后有空格”
高级字符串操作
提取子字符串
从字符串中提取一部分内容:
let fullText: string = “TypeScript很强大”;
// 使用 substring(开始索引, 结束索引)
let part1: string = fullText.substring(0, 10); // “TypeScript”
// 使用 slice(开始索引, 结束索引)
let part2: string = fullText.slice(10); // “很强大”
// 使用 substr(开始索引, 长度) – 已弃用但可用
let part3: string = fullText.substr(0, 4); // “Type”
// 使用 substring(开始索引, 结束索引)
let part1: string = fullText.substring(0, 10); // “TypeScript”
// 使用 slice(开始索引, 结束索引)
let part2: string = fullText.slice(10); // “很强大”
// 使用 substr(开始索引, 长度) – 已弃用但可用
let part3: string = fullText.substr(0, 4); // “Type”
最佳实践: 优先使用 substring 或 slice,substr 已过时
分割字符串
将字符串分割成数组:
// 用逗号分割字符串
let fruits: string = “苹果,香蕉,橙子,葡萄”;
let fruitArray: string[] = fruits.split(“,”);
// 结果: [“苹果”, “香蕉”, “橙子”, “葡萄”]
// 限制分割数量
let limitedSplit: string[] = fruits.split(“,”, 2);
// 结果: [“苹果”, “香蕉”]
// 按字符分割
let letters: string[] = “ABC”.split(“”); // [“A”, “B”, “C”]
let fruits: string = “苹果,香蕉,橙子,葡萄”;
let fruitArray: string[] = fruits.split(“,”);
// 结果: [“苹果”, “香蕉”, “橙子”, “葡萄”]
// 限制分割数量
let limitedSplit: string[] = fruits.split(“,”, 2);
// 结果: [“苹果”, “香蕉”]
// 按字符分割
let letters: string[] = “ABC”.split(“”); // [“A”, “B”, “C”]
实际应用: 解析CSV数据
let csvData: string = “姓名,年龄,城市\n张三,30,北京\n李四,25,上海”;
let rows: string[] = csvData.split(“\n”);
// 然后可进一步处理每一行
let csvData: string = “姓名,年龄,城市\n张三,30,北京\n李四,25,上海”;
let rows: string[] = csvData.split(“\n”);
// 然后可进一步处理每一行
模板字符串
使用反引号(“)创建模板字符串,可以嵌入变量和表达式。
let product: string = “TypeScript教程”;
let price: number = 99.9;
let discount: number = 0.2;
// 基本使用
let info: string = `产品: ${product}, 价格: ${price}元`;
// 包含表达式
let finalPrice: string = `折扣价: ${price * (1 – discount)}元`;
// 多行字符串
let multiLine: string = `第一行
第二行
第三行`;
let price: number = 99.9;
let discount: number = 0.2;
// 基本使用
let info: string = `产品: ${product}, 价格: ${price}元`;
// 包含表达式
let finalPrice: string = `折扣价: ${price * (1 – discount)}元`;
// 多行字符串
let multiLine: string = `第一行
第二行
第三行`;
优势: 模板字符串使代码更易读,尤其当包含变量和多行文本时
字符串比较
比较两个字符串是否相等:
// 简单比较
let str1: string = “hello”;
let str2: string = “Hello”;
console.log(str1 === str2); // false (区分大小写)
console.log(str1.toLowerCase() === str2.toLowerCase()); // true
// 比较字符串顺序
console.log(“apple”.localeCompare(“banana”)); // -1 (apple在banana之前)
console.log(“banana”.localeCompare(“apple”)); // 1 (banana在apple之后)
console.log(“apple”.localeCompare(“apple”)); // 0 (相等)
let str1: string = “hello”;
let str2: string = “Hello”;
console.log(str1 === str2); // false (区分大小写)
console.log(str1.toLowerCase() === str2.toLowerCase()); // true
// 比较字符串顺序
console.log(“apple”.localeCompare(“banana”)); // -1 (apple在banana之前)
console.log(“banana”.localeCompare(“apple”)); // 1 (banana在apple之后)
console.log(“apple”.localeCompare(“apple”)); // 0 (相等)
注意: 中文字符串比较需要使用localeCompare进行正确排序
关键概念与总结
字符串不可变性
在TypeScript/JavaScript中,字符串是不可变的 – 一旦创建就不能修改。
let myString: string = “hello”;
myString[0] = “H”; // 这不会改变字符串
console.log(myString); // 仍然是 “hello”
// 正确方式:创建新字符串
myString = “H” + myString.substring(1);
console.log(myString); // “Hello”
myString[0] = “H”; // 这不会改变字符串
console.log(myString); // 仍然是 “hello”
// 正确方式:创建新字符串
myString = “H” + myString.substring(1);
console.log(myString); // “Hello”
重要: 所有字符串方法都返回新字符串,原始字符串保持不变
Unicode支持
TypeScript字符串完全支持Unicode,包括中文和表情符号。
// 中文字符串
let chinese: string = “中文没问题!”;
// 表情符号
let emoji: string = “👍🚀✨”;
// 使用 Unicode 转义序列
let heart: string = “\u2764\uFE0F”; // ❤️
console.log(`我喜欢TypeScript ${heart}`);
let chinese: string = “中文没问题!”;
// 表情符号
let emoji: string = “👍🚀✨”;
// 使用 Unicode 转义序列
let heart: string = “\u2764\uFE0F”; // ❤️
console.log(`我喜欢TypeScript ${heart}`);
提示: 某些复杂字符(如表情符号)可能由多个代码单元组成