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
相关推荐
刺客-Andy1 天前
React第六节 组件属性prop的propTypes类型使用介绍
前端·javascript·react.js·typescript
applebomb1 天前
【vue3+Typescript】unapp+stompsj模式下替代plus-websocket的封装模块
websocket·typescript·vue·uniapp·plus-websocket
Jacky（易小天）2 天前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
疯狂的沙粒2 天前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
疯狂的沙粒2 天前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
张小小大智慧2 天前
TypeScript 的发展与基本语法
前端·javascript·typescript
幼儿园的小霸王2 天前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 天前
对 TypeScript 中高级类型的理解？应该在哪些方面可以更好的使用！
前端·javascript·typescript
endingCode2 天前
45.坑王驾到第九期：Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
前端百草阁3 天前
【TS简单上手，快速入门教程】————适合零基础
javascript·typescript
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04RAG 实践- Ollama+RagFlow 部署本地知识库05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07抖音的互联网架构08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型