TypeScript 中实现 TrimLeft、TrimRight 等字符串操作类型

 更新时间:2026年06月08日 09:21:35   作者:csdddn  
在 TypeScript 中定义了TrimLeftTrimRight和Trim这三个字符串操作类型,这些类型利用了 TypeScript 的条件类型和递归类型,能够在编译时对字符串进行操作,去除字符串左侧、右侧或两侧的空白字符,下面就来详细了解一下

在 TypeScript 开发过程中,我们常常需要对字符串进行各种操作以满足不同的业务需求。其中,去除字符串两端的空白字符是较为常见的操作之一。虽然 JavaScript 原生提供了 trim() 方法可以同时去除字符串两端的空白字符,但在某些场景下,我们可能只需要去除字符串左侧或右侧的空白字符。接下来,我们将介绍如何在 TypeScript 中实现类似 TrimLeftTrimRight 这样的字符串操作类型。

去除字符串左侧空白字符(TrimLeft)

实现思路

要实现去除字符串左侧空白字符的功能,我们可以借助 TypeScript 的条件类型和递归类型。条件类型允许我们根据一定的条件来选择不同的类型,而递归类型则可以帮助我们逐步处理字符串中的字符。

代码实现

type WhiteSpace = ' ' | '\n' | '\t' | '\r';

type TrimLeft<S extends string> = S extends `${infer First}${infer Rest}`
    ? First extends WhiteSpace
        ? TrimLeft<Rest>
        : S
    : S;

代码解释

  1. 首先,我们定义了一个 WhiteSpace 类型,它包含了常见的空白字符,如空格、换行符、制表符和回车符。
  2. 然后,我们定义了 TrimLeft 类型。它使用了条件类型,通过 extends 关键字来判断字符串 S 是否可以拆分为一个字符 First 和剩余部分 Rest
  3. 如果 First 是空白字符(即 First extends WhiteSpacetrue),则递归调用 TrimLeft 处理剩余部分 Rest
  4. 如果 First 不是空白字符,则直接返回原始字符串 S,因为此时已经找到了非空白字符,左侧的空白字符已经被去除。

使用示例

type Example1 = TrimLeft<'  hello'>; // 'hello'
type Example2 = TrimLeft<'\n\t world'>; // 'world'

去除字符串右侧空白字符(TrimRight)

实现思路

去除字符串右侧空白字符的实现思路与去除左侧空白字符类似,但由于 TypeScript 的类型系统是从左到右进行处理的,我们需要采用一些技巧来实现从右向左的处理。一种常见的方法是将字符串反转,然后去除左侧的空白字符,最后再将结果反转回来。

代码实现

type Reverse<S extends string> = S extends `${infer First}${infer Rest}`
    ? `${Reverse<Rest>}${First}`
    : '';

type TrimRight<S extends string> = Reverse<TrimLeft<Reverse<S>>>;

代码解释

  1. 首先,我们定义了 Reverse 类型,它用于反转字符串。通过递归地将字符串拆分为第一个字符和剩余部分,然后将剩余部分反转后与第一个字符拼接,实现字符串的反转。
  2. 然后,我们定义了 TrimRight 类型。它先使用 Reverse 将原始字符串反转,再使用 TrimLeft 去除反转后字符串左侧的空白字符(即原始字符串右侧的空白字符),最后再使用 Reverse 将结果反转回来,得到去除右侧空白字符后的字符串。

使用示例

type Example3 = TrimRight<'hello  '>; // 'hello'
type Example4 = TrimRight<'world\n\t '>; // 'world'

同时去除字符串两侧空白字符(Trim)

实现思路

既然我们已经实现了 TrimLeftTrimRight,那么同时去除字符串两侧空白字符的 Trim 类型就可以通过组合这两个类型来实现。

代码实现

type Trim<S extends string> = TrimLeft<TrimRight<S>>;

代码解释

Trim 类型先使用 TrimRight 去除字符串右侧的空白字符,再使用 TrimLeft 去除结果字符串左侧的空白字符,从而实现了同时去除字符串两侧空白字符的功能。

使用示例

type Example5 = Trim<'  hello world  '>; // 'hello world'
type Example6 = Trim<'\n\t test\n\t '>; // 'test'

总结

通过上述代码实现,我们在 TypeScript 中定义了 TrimLeftTrimRightTrim 这三个字符串操作类型。这些类型利用了 TypeScript 的条件类型和递归类型,能够在编译时对字符串进行操作,去除字符串左侧、右侧或两侧的空白字符。这种类型级别的操作可以提高代码的类型安全性,减少运行时错误,并且在一些对类型要求严格的场景下非常有用。

到此这篇关于TypeScript 中实现 TrimLeft、TrimRight 等字符串操作类型的文章就介绍到这了,更多相关TypeScript TrimLeft、TrimRight字符串操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript操作localStorage实现保存本地json文件

    JavaScript操作localStorage实现保存本地json文件

    这篇文章主要为大家详细介绍了JavaScript如何操作localStorage实现保存本地json文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • javascript九宫格图片随机打乱位置的实现方法

    javascript九宫格图片随机打乱位置的实现方法

    这篇文章主要为大家详细介绍了javascript九宫格图片随机打乱位置的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 前端将dom转换成图片的方法(使用dom-to-image)

    前端将dom转换成图片的方法(使用dom-to-image)

    这篇文章主要介绍了使用轻量级的dom-to-image插件将DOM元素转换为图片并下载,该插件支持多种图片格式,如SVG、PNG、JPEG等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。本文通过实例代码给大家讲解Bootstrap所支持的表单控件,感兴趣的朋友一起学习吧
    2016-05-05
  • 浅析Ajax语法

    浅析Ajax语法

    本文主要介绍了原生JS中Ajax的实现原理,XMLHttpRequest及promise的概念和流程。需要的朋友可以看下
    2016-12-12
  • js数组Array sort方法使用深入分析

    js数组Array sort方法使用深入分析

    js中Array.sort()方法是用来对数组项进行排序的,默认是升序排列sort() 方法可以接受一个 方法为参数,这个方法有两个参数,接下来本例将对sort方法进行深入探讨,感兴趣的朋友可以参考下
    2013-02-02
  • JavaScript 组件之旅(四):测试 JavaScript 组件

    JavaScript 组件之旅(四):测试 JavaScript 组件

    本期,我们要讨论的话题是 JavaScript 的测试,以检查组件的状态和工作方式是否符合预期,还会介绍一个可以方便编写测试用例的测试方法。这里说的测试当然是使用自动化的测试手段,这是软件质量保证(QA)的重要环节。
    2009-10-10
  • JavaScript Canvas实现井字棋游戏

    JavaScript Canvas实现井字棋游戏

    这篇文章主要为大家详细介绍了JavaScript Canvas实现井字棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript创建闭包的两种方式的优劣与区别分析

    JavaScript创建闭包的两种方式的优劣与区别分析

    这篇文章主要介绍了JavaScript创建闭包的两种方式的优劣与区别分析的相关资料,需要的朋友可以参考下
    2015-06-06
  • 浅析Promise的介绍及基本用法

    浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法,感兴趣的朋友一起看看吧
    2021-10-10

最新评论