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主要提供的接口如下：

实例

源码参考于：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

字符串的存储为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", "#", "$", "%", "^", "&amp;"] 
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

ES6特性

增加的新特性主要有：

• 模版字符串的支持， 支持使用反引号和${}对字符串进行组合

// 使用反引号支持多行
let content = `Hello:
You have a lot of names, ES6 and ES2015
`
console.log(content);

// 组合，且支持表达式的计算
const strName = 'Alice';
const ageNum = 25;
const msg = `My name ${strName} and I am ${ageNum+1} years old.`;
// "My name Alice and I am 26 years old."
console.log(msg);

// 表达式
const x = 10;
const y = 5;
const result = `${x} + ${y} = ${x + y}`;
// "10 + 5 = 15"
console.log(result);

// 调用函数
function f(){
  return "have fun!";
}
let content = `Game start,${f()}`;
// "Game start,have fun!" 
console.log(content);

• 增加了字符串检索子字符串的接口：

const str = 'Hello, world!';
// startsWith 检测字符串是否在原字符串串头部
console.log(str.startsWith('Hello'));   // true
console.log(str.startsWith('ello'));    // false 
// endsWith 检测字符串是否在原字符串的尾部
console.log(str.endsWith('world!'));    // true
console.log(str.endsWith('rld'));       // false
// includes 检测是否包含字符串
console.log(str.includes('llo'));       // true
console.log(str.includes('o, w'));      // true 

• 增加了重复字符串和填充字符串的接口:

let str = 'a';

/**
reqeat 返回指定次数的新字符串，注意：
* 如果参数为大于0的浮点数，则向下取整
* 如果为0到-1之间的数字，默认为0
*/
console.log(str.repeat(3));     // "aaa"
console.log(str.repeat(3.5));   // "aaa"
console.log(str.repeat(-0.1));  // "" 

/*
@padStart(maxLength: number, fillString?: string): string
@func: 从头部补充字符串
@param: 设定的长度，如果小于当前字符串长度，则返回当前字符串
@param: 填充的字符串
*/
str = str.repeat(3);
// 长度小于当前字符串长度，不变
console.log(str.padStart(1, 'x')); // "aaa" 
console.log(str.padStart(5, 'x')); // "xxaaa"

// padEnd 从末尾补充字符串
console.log(str.padEnd(6, 'y'));  // "aaayyy" 

其他内容可参考: TypeScript 之 String

代码007普通

打赏 收藏 海报 链接