typeScript 之 String

FlyingBird~2023-08-14 8:31

工具： PlayGround

源码： GitHub TypeScript

String

在TypeScript中， string作为基础的字符串类型， 使用单引号('')或双引号("")来包含字符串，使用反引号(`)来格式化文本或内嵌表达式， 存储的是UTF-16字符串序列。

typescript 复制代码 
let name: string = "TypeScript";
let years: number = 5;
let words: string = `您好，今年是${name}发布${years + 1}周年`;

对于字符串处理相关，提供了String的对象

typescript 复制代码 
// 注意: 创建参数为任意类型
const str = new String("hello");
console.log(str);			// String: "hello"

String主要提供的接口如下：

接口 返回值 描述
length number 获取String对象的长度
toString() string 返回字符串
charAt() string 返回指定位置字符
charCodeAt() number 返回指定的位置字符的 Unicode 编码
concat() string 连接多个字符串，并返回新的字符串
indexOf() number 返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf() number 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置
localeCompare() number 用本地特定的顺序来比较两个字符串
match() RegExpMatchArray 查找找到一个或多个正则表达式的匹配
replace() string 替换与正则表达式匹配的子串
search() number 检索与正则表达式相匹配的值
slice() string 提取字符串的片断，并在新的字符串中返回被提取的部分
split() string[] 把字符串分割为子字符串数组
substr() string 从起始索引提取字符串中指定数目的字符
substring() string 提取字符串中两个指定的索引号之间的字符
toLowerCase() string 把字符串转换为小写
toLocaleLowerCase() string 根据主机的语言环境把字符串转换为小写
toUpperCase() string 把字符串转换为大写
toLocaleUpperCase() string 据主机的语言环境把字符串转换为大写
trim() string 从字符串中删除前后的空格和行结束符
valueOf() string 返回指定字符串对象的原始值

实例

源码参考于：es5.d.ts

typescript 复制代码 
interface String {
  // 返回字符串
  toString(): string;
  // 返回指定位置字符
  charAt(pos: number): string;
  // 返回在指定的位置的字符的Unicode值
  // 如果索引没有字符，则返回NaN
  charCodeAt(index: number): number;
  // 连接两个或更多字符串，并返回新的字符串
  concat(...strings: string[]): string;
  /*
  	@func: 返回字符串第一次出现的位置
  	@param searchString 搜索的字符串
  	@param position String对象索引，如果省略，则从字符串开头搜索
  	*/
  indexOf(searchString: string, position?: number): number;
  /*
  	@func: 返回子字符串在字符串中的最后一次出现
  	@param searchString 搜索的字符串
  	@param position 开始搜索的索引。如果省略，则从字符串的末尾开始搜索
  	*/
  lastIndexOf(searchString: string, position?: number): number;
  // 用本地特定的顺序来比较两个字符串
  localeCompare(that: string): number;
  // 查找找到一个或多个正则表达式的匹配
  match(regexp: string | RegExp): RegExpMatchArray | null;
  // 使用正则表达式或搜索字符串替换字符串中的文本
  replace(searchValue: string | RegExp, replaceValue: string): string;
  replace(searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
  // 在正则表达式搜索中查找第一个匹配的子字符串
  search(regexp: string | RegExp): number;
  /*
  	@func: 返回字符串的一部分
  	@param: start 开始索引
  	@param: end: 结束索引，字符不包含end指示的字符，如果忽略，则为末尾
  	*/
  slice(start?: number, end?: number): string;
  /*
  	@func: 使用指定的分隔符分割字符串
  	@param: separator 用于分隔字符串的一个或多个的字符串 
  		如果省略，则返回包含整个字符串的单元素数组
  	@param: 用于限制数组中返回元素数量的值
  	*/
  split(separator: string | RegExp, limit?: number): string[];
  /*
  	@func: 返回指定位置的子字符串
  	@param: start 开始位置(0开始)
  	@param: end 结束位置，字符不包含end指示的字符，如果忽略，则为末尾
  	*/
  substring(start: number, end?: number): string;
  // 将字符串中的所有字母转换为小写字母
  toLowerCase(): string;
  // 根据主机的语言环境把字符串转换为小写
  toLocaleLowerCase(locales?: string | string[]): string;
  // 把字符串转换为大写
  toUpperCase(): string;
  // 据主机的语言环境把字符串转换为大写
  toLocaleUpperCase(locales?: string | string[]): string;
  // 从字符串中删除前后的空格和行结束符
  trim(): string;
  // 获取String对象的长度
  readonly length: number;
  /*
  @func: IE扩展，获取从指定位置开始并具有指定长度的子字符串, 浏览器兼容性的遗留功能
  @param: from 所需子字符串的起始位置。字符串中第一个字符的索引为零
  @param: length返回子字符串中包含的字符数
  */
  substr(from: number, length?: number): string;
  // 返回指定对象的原始值
  valueOf(): string;
  readonly [index: number]: string;
}

interface StringConstructor {
  new(value?: any): String;
  (value?: any): string;
  readonly prototype: String;
  // 该方法用于将Unicode值转换为对应的字符
  fromCharCode(...codes: number[]): string;
}
declare var String: StringConstructor;

由于支持的函数比较多，我们将分块编写他们的实例代码相关， 以便对String有更好的了解。

boxing和unboxing

两个概念： 装箱(boxing)和拆箱(unboxing)。

简单的理解： 装箱 是将一个值类型通过自动创建一个对象转换为引用类型， 而拆箱则是将一个引用对象类型转换为值类型。

在JavaScript/TypeScript中，允许将数字，字符串等值类型转换为对应的封装对象。

因此，不必去怀疑为何string和String不同的类型对象，但可以调用相同的方法。

typescript 复制代码 
const str = "hello TypeScript";
console.log(str.toUpperCase());			// "HELLO TYPESCRIPT" 

const strObj = new String(str);
console.log(strObj.toUpperCase());	// "HELLO TYPESCRIPT"

虽然他们的类型不同，但得益于JavaScript/TypeScript提供了自动装箱和拆箱的机制，使得可以更好的满足我们的开发需求。

基本使用

typescript 复制代码 
const strObj = new String("Hello");
console.log("字符串长度:" + strObj.length);		// "字符串长度:5"

const strList = ["Hello", "Please", "use", "TypeScript"];
const strObj = new String(strList);

如果number类型和string类型想链接在一起，推荐的方式：

typescript 复制代码 
const num: number = 10;
const str: string = "typeScript";
// 使用 + 
let result_1 = "数字:" + num + " 字符串:" + str; 
console.log(result_1);		// 数字:10 字符串:typeScript
// 使用反引号等格式化文本
let result_2 = `数字:${num} 字符串:${str}`;
console.log(result_2);		// 数字:10 字符串:typeScript

在TypeScript的字符串的存储为UTF-16系列， 所以在获取较为复杂的中英文字符时，不需要再考虑中文所占字节，直接遍历即可。

typescript 复制代码 
const str = "您好,eH123#$%^&"
const strObj = new String(str);

let result: string[] = [];
for (let i = 0; i < strObj.length; i++) {
    // 获取指定位置字符
    let char = strObj.charAt(i);
    // 数组添加元素
    result.push(char);
}
// ["您", "好", ",", "e", "H", "1", "2", "3", "#", "$", "%", "^", "&"] 
console.log(result);

获取指定字符相关

  • charAt 根据索引获取指定位置字符，不支持负数
typescript 复制代码 
const str: string = "Hello";
// 获取首位字符
console.log(str.charAt(0));
// 获取末尾字符
console.log(str.charAt(str.length-1));
  • charCodeAt 获取指定索引位置的Unicode值
typescript 复制代码 
const str: string = "abc";
console.log(str.charCodeAt(0));             // 97 
console.log(str.charCodeAt(str.length-1));  // 99
console.log(str.charCodeAt(-1));            // NaN
console.log(str.charCodeAt(5));             // NaN

注意： 非索引位置返回的为NaN

  • fromCharCode String构造中提供的方法， 可将Unicode值转换为字符串
typescript 复制代码 
const numList: number[] = [97, 98, 99];
let str = ""
for (let i = 0; i < numList.length; ++i) {
    str += String.fromCharCode(numList[i]);
}
console.log(str);       // abc
  • 获取字符串首先出现的位置
typescript 复制代码 
// ------------ indexOf 从左往右 ------------
const str: string = "Hello TypeScript";
console.log(str.indexOf("l", 0));       // 2
console.log(str.indexOf("l", 10));      // -1

// ------------ lastIndexOf 从右往左------------
const str: string = "Hello TypeScript";
const strObj = new String(str);
// 使用string获取位置,
let pos_1 = str.lastIndexOf("l");
console.log(pos_1);					// 3 		
// 使用String对象获取位置
let pos_2 = strObj.lastIndexOf("a");
console.log(pos_2);					// -1

注意： 如果获取不到位置，都会返回-1

截取字符串相关

从开始位置到结束位置截取字符串的主要方法有：

  • slice(start?: number, end?: number): string
  • substring(start: number, end?: number): string
  • substr(from: number, length?: number): string
typescript 复制代码 
const str = "Hello TypeScript";

// 使用 slice 方法截取字符串
const slicedStr = str.slice(6, 13);
console.log(slicedStr); // 输出 "TypeScr"

// 使用 substr 方法截取字符串
const substrStr = str.substr(6, 9);
console.log(substrStr); // 输出 "TypeScript"

// 使用 substring 方法截取字符串
const substringStr = str.substring(6, 13);
console.log(substringStr); // 输出 "TypeScr"

字符串大小写相关

大小写的方法主要有：

  • toLowerCase 将字符串变为小写
  • toUpperCase 将字符串变为大写
  • toLocaleLowerCase 将字符串根据语言环境转换为小写
  • toLocaleUpperCase 将字符串根据语言环境转换为大写
typescript 复制代码 
const str = "HELLO TypeScript";

// 在默认语言环境（中文简体）下，将字符串转换为小写形式
const resultDefault = str.toLocaleLowerCase();
console.log(resultDefault); // 输出 "hello typescript"

// 在英文环境下，将字符串转换为小写形式
const resultEnglish = str.toLocaleLowerCase("en-US");
console.log(resultEnglish); // 输出 "hello typescript"

// 在土耳其语环境下，将字符串转换为小写形式
const resultTurkish = str.toLocaleLowerCase("tr-TR");
console.log(resultTurkish); // 输出 "hello typescript"

组合拆分字符串

  • concat组合字符串
typescript 复制代码 
let str = ""
const strList = ["Hello", "Please", "use", "TypeScript"];
for (let i = 0; i < strList.length; ++i) {
    str = str.concat(strList[i]) + " ";
}
// 剔除掉首尾空格
str = str.trim();   
console.log(str);       // "Hello Please use TypeScript"
  • 拆分字符串
typescript 复制代码 
const str = "Hello Please use TypeScript";
let strList = str.split(" ");
console.log(strList);   // ["Hello", "Please", "use", "TypeScript"]

正则表达式匹配相关

主要的方法有：

  • match 查找找到一个或多个正则表达式的匹配
  • search 检索与正则表达式相匹配的值
  • replace 替换与正则表达式匹配的子串

简单的实例：

typescript 复制代码 
const str = "Hello, my phone number is 123-456-7890";

// 使用 match 方法查找匹配的字符串
const matchResult = str.match(/\d{3}-\d{3}-\d{4}/);
console.log(matchResult); // 输出 ["123-456-7890"]

// 使用 replace 方法替换匹配的字符串
const replacedStr = str.replace(/\d{3}-\d{3}-\d{4}/, "XXX-XXX-XXXX");
console.log(replacedStr); // 输出 "Hello, my phone number is XXX-XXX-XXXX"

// 使用 search 方法搜索匹配的字符串
const searchResult = str.search(/\d{3}-\d{3}-\d{4}/);
console.log(searchResult); // 输出 26
相关推荐
王解1 天前
Jest项目实战(2)： 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
鸿蒙开天组●1 天前
鸿蒙进阶篇-网格布局 Grid/GridItem（二）
前端·华为·typescript·harmonyos·grid·mate70
zhizhiqiuya1 天前
第二章 TypeScript 函数详解
前端·javascript·typescript
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
王解2 天前
Jest进阶知识：深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
_jiang2 天前
nestjs 入门实战最强篇
redis·typescript·nestjs
清清ww2 天前
【TS】九天学会TS语法---计划篇
前端·typescript
努力变厉害的小超超3 天前
TypeScript中的类型注解、Interface接口、泛型
javascript·typescript
王解3 天前
Jest进阶知识：整合 TypeScript - 提升单元测试的类型安全与可靠性
前端·javascript·typescript·单元测试
Vesper634 天前
【TS】TypeScript 类型定义之联合类型（union types）和交叉类型（intersection types）
linux·ubuntu·typescript
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解