--- url: /docs/5.0/front/function.md --- # 常用函数集合 前端项目提供了非常多的常用函数，在文件 `src/support/helper.ts` 中。这些函数可以帮助我们更高效地开发前端应用。 ## 环境变量相关 ### env 获取环境变量的值。 ```typescript env(key: string): any ``` **参数：** * `key`: 环境变量名称 **返回值：** * 对应环境变量的值 **示例：** ```typescript // 获取 API 基础 URL const baseUrl = env('VITE_BASE_URL') // 获取应用名称 const appName = env('VITE_APP_NAME') ``` ### isProd 判断当前环境是否是生产环境。 ```typescript isProd(): boolean ``` **返回值：** * `true`: 当前是生产环境 * `false`: 当前不是生产环境 **示例：** ```typescript if (isProd()) { // 生产环境下的逻辑 } else { // 开发环境下的逻辑 } ``` ## 认证相关 ### rememberAuthToken 保存认证令牌到缓存中。 ```typescript rememberAuthToken(token: string): void ``` **参数：** * `token`: 认证令牌字符串 **示例：** ```typescript // 登录成功后保存令牌 rememberAuthToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...') ``` ### removeAuthToken 从缓存中移除认证令牌。 ```typescript removeAuthToken(): void ``` **示例：** ```typescript // 退出登录时移除令牌 removeAuthToken() ``` ### getAuthToken 获取当前的认证令牌。 ```typescript getAuthToken(): string | null ``` **返回值：** * 认证令牌字符串，如果不存在则返回 `null` **示例：** ```typescript const token = getAuthToken() if (token) { // 用户已登录 } else { // 用户未登录 } ``` ### getBearerToken 获取带有 Bearer 前缀的认证令牌，用于 HTTP 请求头。 ```typescript getBearerToken(): string | null ``` **返回值：** * 带有 Bearer 前缀的认证令牌字符串，如果不存在则返回 `null` **示例：** ```typescript const headers = { Authorization: getBearerToken() } // 发送请求 fetch('/api/user', { headers }) ``` ## 界面相关 ### isMiniScreen 判断当前是否是小屏幕设备（宽度小于 500px）。 ```typescript isMiniScreen(): boolean ``` **返回值：** * `true`: 当前是小屏幕 * `false`: 当前不是小屏幕 **示例：** ```typescript if (isMiniScreen()) { // 小屏幕适配逻辑 } else { // 大屏幕适配逻辑 } ``` ### t 国际化翻译函数，基于 i18n。 ```typescript t(translate: string): string ``` **参数：** * `translate`: 翻译键名 **返回值：** * 翻译后的文本 **示例：** ```typescript // 假设 i18n 配置中有 { "welcome": "欢迎使用" } const message = t('welcome') // 结果: "欢迎使用" ``` ### setPageTitle 设置页面标题。 ```typescript setPageTitle(title: string): void ``` **参数：** * `title`: 页面标题 **示例：** ```typescript // 设置页面标题为 "用户中心" setPageTitle('用户中心') // 如果有站点标题配置，结果会是 "用户中心-站点名称" ``` ## 类型判断 ### isUndefined 判断值是否是 undefined。 ```typescript isUndefined(value: any): boolean ``` **参数：** * `value`: 要判断的值 **返回值：** * `true`: 值是 undefined * `false`: 值不是 undefined **示例：** ```typescript if (isUndefined(user.name)) { // 处理 name 未定义的情况 } ``` ### isFunction 判断值是否是函数。 ```typescript isFunction(value: any): boolean ``` **参数：** * `value`: 要判断的值 **返回值：** * `true`: 值是函数 * `false`: 值不是函数 **示例：** ```typescript if (isFunction(callback)) { callback() } ``` ### isBoolean 判断值是否是布尔类型。 ```typescript isBoolean(value: any): boolean ``` **参数：** * `value`: 要判断的值 **返回值：** * `true`: 值是布尔类型 * `false`: 值不是布尔类型 **示例：** ```typescript if (isBoolean(config.enabled)) { // 处理 enabled 是布尔值的情况 } ``` ### isNumber 判断值是否是数字类型。 ```typescript isNumber(value: any): boolean ``` **参数：** * `value`: 要判断的值 **返回值：** * `true`: 值是数字类型 * `false`: 值不是数字类型 **示例：** ```typescript if (isNumber(age)) { // 处理 age 是数字的情况 } ``` ## 字符串处理 ### ucfirst 将字符串的首字母转为大写。 ```typescript ucfirst(str: string): string ``` **参数：** * `str`: 要处理的字符串 **返回值：** * 首字母大写后的字符串 **示例：** ```typescript const name = ucfirst('john') // 结果: "John" ``` ### lcfirst 将字符串的首字母转为小写。 ```typescript lcfirst(str: string): string ``` **参数：** * `str`: 要处理的字符串 **返回值：** * 首字母小写后的字符串 **示例：** ```typescript const name = lcfirst('John') // 结果: "john" ``` ### randomString 生成指定长度的随机字符串。 ```typescript randomString(e: number = 10): string ``` **参数：** * `e`: 生成的字符串长度，默认为 10 **返回值：** * 生成的随机字符串 **示例：** ```typescript // 生成默认长度(10)的随机字符串 const str1 = randomString() // 生成长度为 5 的随机字符串 const str2 = randomString(5) ``` ### strToFunction 将字符串转换为函数。 ```typescript strToFunction(str: string, params?: any): Function ``` **参数：** * `str`: 要转换的字符串 * `params`: 可选的参数 **返回值：** * 转换后的函数 **示例：** ```typescript // 将字符串转换为函数 const fn = strToFunction('function() { return "Hello World"; }') const result = fn() // 结果: "Hello World" // 带参数的情况 const fn2 = strToFunction('function(name) { return "Hello " + name; }', { name: 'John' }) const result2 = fn2('John') // 结果: "Hello John" ``` ## 文件处理 ### generateFilename 生成唯一的文件名。 ```typescript generateFilename(filename: string): string ``` **参数：** * `filename`: 原始文件名 **返回值：** * 生成的唯一文件名 **示例：** ```typescript const uniqueName = generateFilename('image.jpg') // 结果可能是: "1634567890abcDEF.jpg" ``` ### getFileExt 获取文件的扩展名。 ```typescript getFileExt(filename: string): string ``` **参数：** * `filename`: 文件名 **返回值：** * 文件的扩展名（包含点号） **示例：** ```typescript const ext = getFileExt('document.pdf') // 结果: ".pdf" ``` ### getFilename 从路径中获取文件名。 ```typescript getFilename(filename: string): string ``` **参数：** * `filename`: 文件路径 **返回值：** * 文件名 **示例：** ```typescript const name = getFilename('/path/to/document.pdf') // 结果: "document.pdf" ``` ## 数组处理 ### unique 数组去重。 ```typescript unique(arr: Array): Array ``` **参数：** * `arr`: 要去重的数组 **返回值：** * 去重后的数组 **示例：** ```typescript const arr = [1, 2, 2, 3, 3, 4] const uniqueArr = unique(arr) // 结果: [1, 2, 3, 4] ``` ## 日期处理 ### date 将时间戳转化成指定格式的日期字符串。 ```typescript date(format: string, timestamp: number): string ``` **参数：** * `format`: 日期格式，如 'YYYY-MM-DD HH:mm:ss' * `timestamp`: 时间戳（秒） **返回值：** * 格式化后的日期字符串 **示例：** ```typescript const formattedDate = date('YYYY-MM-DD HH:mm:ss', 1634567890) // 结果可能是: "2021-10-18 15:31:30" ``` ## 其他工具函数 ### \_window 获取全局配置。 ```typescript _window(key: string): any ``` **参数：** * `key`: 配置键名 **返回值：** * 配置值，如果不存在则返回 `null` **示例：** ```typescript const baseUrl = _window('BASE_URL') ``` ### getBaseUrl 获取项目的基础 URL。 ```typescript getBaseUrl(): string ``` **返回值：** * 项目的基础 URL **示例：** ```typescript const baseUrl = getBaseUrl() // 在非生产环境下返回 '/api' // 在生产环境下返回配置的 BASE_URL 或环境变量中的 VITE_BASE_URL ``` ### warpHost 为路径添加主机名，确保路径是完整的 URL。 ```typescript warpHost(path: string | null): string | null ``` **参数：** * `path`: 路径 **返回值：** * 添加主机名后的完整 URL **示例：** ```typescript const fullUrl = warpHost('/images/logo.png') // 如果前后端不在同一域名下，结果可能是: "https://api.example.com/images/logo.png" // 如果前后端在同一域名下，结果是: "/images/logo.png" ```