TypeScript 字符串最佳实践与性能优化（八）
- 前端开发
- 6天前
- 7热度
- 0评论
在现代前端开发中，TypeScript 作为一种静态类型语言，提供了强大的类型检查和编译时错误检测功能。本文将深入探讨 TypeScript 中的字符串类型，包括其基本用法、创建方式、性能差异以及最佳实践。通过本文，你将了解如何在项目中高效地使用字符串，避免常见的陷阱，并提升代码的可读性和性能。
字符串基础
在 TypeScript 中，字符串（string）是一种用于表示文本数据的基本数据类型。它不仅继承了 JavaScript 的字符串特性，还增加了静态类型校验，确保代码的健壮性和可维护性。
创建字符串
TypeScript 提供了两种创建字符串的方式，分别是字符串字面量和 String 对象。虽然这两种方式都可以创建字符串，但在性能和使用场景上存在显著差异。
字符串字面量（推荐）
字符串字面量是最常见且性能最优的创建方式。它直接创建一个原始字符串类型（string），并自动进行类型推导。
// 原始字符串（推荐使用）
const txt1: string = "Hello TypeScript"; // 显式指定类型
const txt2 = "Hello JavaScript"; // 类型推导为 stringString 对象（不推荐）
通过 new String() 创建的是一个 String 对象，本质上是一个引用类型。这种方式虽然提供了更多的方法和属性，但会带来类型混淆和性能损耗。
// String 对象（不推荐）
const txtObj: String = new String("Hello Object"); // 类型为 String（对象）字符串字面量 vs String 对象
| 特性 | 字符串字面量（string） | String 对象（String） |
|---|---|---|
| 类型本质 | 原始值 | 引用类型（对象） |
| 性能 | 高效，无额外内存开销 | 低效，创建对象实例 |
| 类型校验（TypeScript） | 符合 TS 基础类型规范 | 类型不匹配（如 string 类型变量无法赋值 String 对象） |
| 比较方式 | 直接比较值 | 比较引用地址（需用 valueOf() 取原始值） |
示例
let strLiteral: string = "Test";
let strObject: String = new String("Test");
console.log(strLiteral === strObject); // 输出：false，内容相同，类型不同
console.log(strLiteral == strObject); // 输出：true，内容相同
console.log(strLiteral === strObject.valueOf()); // 输出：true，将对象转为原始字符串后比较字符串字面量和 String 对象的类型兼容性
在 TypeScript 中，string 字面量类型和 String 对象类型不完全兼容。string 类型的变量无法直接使用 String 对象的方法，反之亦然。因此，通常情况下不需要使用 String 对象。
示例
let strLiteral: string = "Use string literals whenever possible!";
let strObject: String = new String("Avoid using String objects.");
console.log(strLiteral); // 输出："Use string literals whenever possible!"
console.log(strObject.valueOf()); // 输出："Avoid using String objects."String 对象的属性和方法
尽管不推荐使用 String 对象，但在某些特殊场景下，了解其属性和方法仍然是必要的。
属性
| 序号 | 属性 & 描述 | 示例 |
|---|---|---|
| 1. | constructor 对创建该对象的函数的引用。 | typescript var str = new String("This is string"); console.log("str.constructor is:" + str.constructor); // 输出：str.constructor is:function String() { [native code] } |
| 2. | length 返回字符串的长度。 | typescript var uname = new String("Hello World"); console.log("Length " + uname.length); // 输出 11 |
| 3. | prototype 允许您向对象添加属性和方法。 | typescript function employee(id: number, name: string) { this.id = id; this.name = name; } var emp = new employee(123, "admin"); employee.prototype.email = "admin@runoob.com"; // 添加属性 email console.log("员工号: " + emp.id); // 输出：员工号: 123 console.log("员工姓名: " + emp.name); // 输出：员工姓名: admin console.log("员工邮箱: " + emp.email); // 输出：员工邮箱: admin@runoob.com |
方法
| 序号 | 方法 & 描述 | 示例 |
|---|
| 1. | charAt() 返回在指定位置的字符。 | typescript var str = new String("RUNOOB"); console.log("str.charAt(0) 为:" + str.charAt(0)); // 输出：R console.log("str.charAt(1) 为:" + str.charAt(1)); // 输出：U console.log("str.charAt(2) 为:" + str.charAt(2)); // 输出：N console.log("str.charAt(3) 为:" + str.charAt(3)); // 输出：O console.log("str.charAt(4) 为:" + str.charAt(4)); // 输出：O console.log("str.charAt(5) 为:" + str.charAt(5)); // 输出：B |
| 2. | charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 | typescript var str = new String("RUNOOB"); console.log("str.charCodeAt(0) 为:" + str.charCodeAt(0)); // 输出：82 console.log("str.charCodeAt(1) 为:" + str.charCodeAt(1)); // 输出：85 console.log("str.charCodeAt(2) 为:" + str.charCodeAt(2)); // 输出：78 console.log("str.charCodeAt(3) 为:" + str.charCodeAt(3)); // 输出：79 console.log("str.charCodeAt(4) 为:" + str.charCodeAt(4)); // 输出：79 console.log("str.charCodeAt(5) 为:" + str.charCodeAt(5)); // 输出：66 |
| 3. | concat() 连接两个或更多字符串，并返回新的字符串。 | typescript var str1 = new String("RUNOOB"); var str2 = new String("GOOGLE"); var str3 = str1.concat(str2); console.log("str1 + str2 : " + str3); // 输出：RUNOOBGOOGLE |
| 4. | indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。 | typescript var str1 = new String("RUNOOB"); var index = str1.indexOf("OO"); console.log("查找的字符串位置 :" + index); // 输出：3 |
| 5. | lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 | typescript var str1 = new String("This is string one and again string"); var index = str1.lastIndexOf("string"); console.log("lastIndexOf 查找到的最后字符串位置 :" + index); // 输出：29 index = str1.lastIndexOf("one"); console.log("lastIndexOf 查找到的最后字符串位置 :" + index); // 输出：15 |
| 6. | localeCompare() 用本地特定的顺序来比较两个字符串。 | typescript var str1 = new String("This is beautiful string"); var index = str1.localeCompare("This is beautiful string"); console.log("localeCompare first :" + index); // 输出：0 |
| 7. | match() 查找找到一个或多个正则表达式的匹配。 | typescript var str = "The rain in SPAIN stays mainly in the plain"; var n = str.match(/ain/g); console.log(n); // 输出：[ 'ain', 'ain', 'ain' ] |
| 8. | replace() 替换与正则表达式匹配的子串。 | typescript var re = /(\w+)\s(\w+)/; var str = "zara ali"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); // 输出：ali, zara |
| 9. | search() 检索与正则表达式相匹配的值。 | typescript var re = /apples/gi; var str = "Apples are round, and apples are juicy."; if (str.search(re) == -1) { console.log("Does not contain Apples"); } else { console.log("Contains Apples"); } |
| 10. | slice() 提取字符串的片段，并在新的字符串中返回被提取的部分。 | typescript var str = "Apples are round, and apples are juicy."; var sliced = str.slice(0, 10); console.log(sliced); // 输出：Apples are |
| 11. | split() 把字符串分割为子字符串数组。 | typescript var str = "Apples are round, and apples are juicy."; var splitted = str.split(" ", 3); console.log(splitted); // 输出：[ 'Apples', 'are', 'round,' ] |
| 12. | substr() 从起始索引号提取字符串中指定数目的字符。 | typescript var str = "Apples are round, and apples are juicy."; var substr = str.substr(0, 10); console.log(substr); // 输出：Apples are |
| 13. | substring() 提取字符串中两个指定的索引号之间的字符。 | typescript var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; console.log("(1,2): " + str.substring(1, 2)); // 输出：U console.log("(0,10): " + str.substring(0, 10)); // 输出：RUNOOB GOO console.log("(5): " + str.substring(5)); // 输出：B GOOGLE TAOBAO FACEBOOK |
| 14. | toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。 | typescript var str = "Runoob Google"; console.log(str.toLocaleLowerCase()); // 输出：runoob google |
| 15. | toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。 | typescript var str = "Runoob Google"; console.log(str.toLocaleUpperCase()); // 输出：RUNOOB GOOGLE |
| 16. | toLowerCase() 把字符串转换为小写。 | typescript var str = "Runoob Google"; console.log(str.toLowerCase()); // 输出：runoob google |
| 17. | toString() 返回字符串。 | typescript var str = "Runoob"; console.log(str.toString()); // 输出：Runoob |
| 18. | toUpperCase() 把字符串转换为大写。 | typescript var str = "Runoob Google"; console.log(str.toUpperCase()); // 输出：RUNOOB GOOGLE |
| 19. | valueOf() 返回指定字符串对象的原始值。 | typescript var str = new String("Runoob"); console.log(str.valueOf()); // 输出：Runoob |
最佳实践
在 TypeScript 中，使用 String 对象通常是不必要的，直接使用 string 字面量会更高效且符合 TypeScript 的最佳实践：
- 性能：String 对象是一个引用类型，会占用更多内存，且每次创建一个新对象性能开销更大。
- 类型安全：TypeScript 更鼓励使用 string 字面量类型，保持代码的简洁和一致性。
如果确实需要使用 String 对象的方法，可以通过 valueOf() 方法将对象转为原始字符串，然后继续处理。
示例
let strLiteral: string = "Use string literals whenever possible!";
let strObject: String = new String("Avoid using String objects.");
console.log(strLiteral); // 输出："Use string literals whenever possible!"
console.log(strObject.valueOf()); // 输出："Avoid using String objects."总结
通过本文，我们深入了解了 TypeScript 中字符串的基本用法、创建方式及其性能差异。推荐在日常开发中优先使用字符串字面量，以提高代码的性能和可读性。同时，我们也介绍了 String 对象的属性和方法，以便在特殊场景下灵活应对。希望这些知识能帮助你在 TypeScript 项目中更加高效地使用字符串。