typeScript 之 String

工具： PlayGround

源码： GitHub TypeScript

String

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

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

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

// 注意: 创建参数为任意类型
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

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不同的类型对象，但可以调用相同的方法。

const str = "hello TypeScript";
console.log(str.toUpperCase());			// "HELLO TYPESCRIPT" 

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

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

基本使用

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

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

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

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系列， 所以在获取较为复杂的中英文字符时，不需要再考虑中文所占字节，直接遍历即可。

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 根据索引获取指定位置字符，不支持负数

const str: string = "Hello";
// 获取首位字符
console.log(str.charAt(0));
// 获取末尾字符
console.log(str.charAt(str.length-1));

• charCodeAt 获取指定索引位置的Unicode值

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值转换为字符串

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

• 获取字符串首先出现的位置

// ------------ 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

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 将字符串根据语言环境转换为大写

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组合字符串

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" 

• 拆分字符串

const str = "Hello Please use TypeScript";
let strList = str.split(" ");
console.log(strList);   // ["Hello", "Please", "use", "TypeScript"] 

正则表达式匹配相关

主要的方法有：

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

简单的实例：

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