vue3中数字格式化函数js封装示例

<think>好的，我需要为用户提供一个Vue3中数字格式化函数的封装示例。首先，我得回顾一下用户提供的引用内容，看看有没有相关的实现可以参考。 用户提到了引用[3]中的通用请求工具函数封装，这可能涉及到如何组织代码结构。引用[4]和[5]都是关于时间格式化的，但用户需要的是数字格式化，所以需要转换思路。数字格式化通常包括千分位分隔、保留小数位、百分比显示等功能，所以函数需要支持这些参数。 接下来，我需要考虑Vue3的组合式API，比如使用ref或computed，但用户可能只需要一个工具函数，而不是响应式的。因此，应该创建一个纯函数，接收数值和配置选项，返回格式化后的字符串。 然后，检查用户提供的引用中的工具函数结构，比如引用[1]中的typeOf函数，使用ES6模块导出。因此，我应该采用类似的模块化方式，导出formatNumber函数。 函数内部需要处理各种情况，比如非数字输入，可能需要默认值或错误处理。然后，根据配置参数处理小数位数、千分位分隔符、百分比显示等。使用正则表达式添加千分位分隔符是一个常见的做法，例如将1234567转换成1,234,567。 另外，引用[4]中提到的padStart方法可能在处理小数部分时有用，但主要是在时间格式化中用得多。数字的小数部分可能需要四舍五入，使用toFixed方法，但需要注意其精度问题。 最后，考虑到Vue3的全局属性挂载方式，比如在main.js中通过app.config.globalProperties添加，方便组件内使用。同时，也可以作为过滤器使用，但Vue3推荐使用方法而不是过滤器，不过用户提到引用[4]中的过滤器示例，可能需要提供两种方式的示例。 测试用例也很重要，确保函数在不同情况下工作正常，比如整数、小数、负数、百分比等。同时，处理无效输入，返回默认值如'-'，提高健壮性。 总结步骤：创建函数，处理参数，实现千分位、小数位、百分比，导出函数，提供全局挂载方法，示例用法和测试用例。</think>根据您的需求，我将为您展示一个基于Vue3的可复用数字格式化函数封装方案，包含完整实现和多种应用场景： ### 一、基础数字格式化函数封装 ```javascript // utils/numberFormatter.js /** * 数字格式化函数 * @param {number|string} value - 输入值 * @param {Object} options - 配置项 * @returns {string} 格式化后的字符串 */ export function formatNumber(value, options = {}) { const { decimal = 2, // 小数位数 thousandSeparator = true, // 千分位分隔 prefix = '', // 前缀符号(如¥) suffix = '', // 后缀符号(如%) nullPlaceholder = '-' // 空值占位符 } = options // 空值处理 if ([null, undefined, ''].includes(value)) return nullPlaceholder // 转换为数字类型 const numValue = Number(value) // 异常值处理 if (isNaN(numValue)) return nullPlaceholder // 计算实际数值（处理百分比） const actualValue = suffix === '%' ? numValue * 100 : numValue // 小数处理 const fixedValue = actualValue.toFixed(decimal) // 拆分整数小数部分 let [integerPart, decimalPart] = fixedValue.split('.') // 千分位格式化 if (thousandSeparator) { integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',') } // 组合最终结果 return `${prefix}${integerPart}${decimal ? `.${decimalPart}` : ''}${suffix}` } ``` ### 二、Vue3全局注册（main.js） ```javascript import { createApp } from 'vue' import App from './App.vue' import { formatNumber } from './utils/numberFormatter' const app = createApp(App) // 全局属性挂载 app.config.globalProperties.$formatNumber = formatNumber // 全局过滤器注册（可选） app.config.globalProperties.$filters = { numberFormat: formatNumber } app.mount('#app') ``` ### 三、使用示例 #### 1. 基本用法（选项式API） ```javascript // 组件内使用 export default { methods: { showPrice(amount) { return this.$formatNumber(amount, { decimal: 2, prefix: '¥' }) } } } ``` #### 2. 组合式API使用 ```javascript import { formatNumber } from '@/utils/numberFormatter' // 组合式函数封装 export function useNumberFormatter() { const formatCurrency = (value) => { return formatNumber(value, { decimal: 2, prefix: '¥', thousandSeparator: true }) } return { formatCurrency } } ``` #### 3. 模板直接调用 ```vue <template> <!-- 全局属性方式 --> <div>{{ $formatNumber(1234567.8912, { decimal: 1 }) }}</div> <!-- 输出：1,234,567.9 --> <!-- 过滤器方式 --> <div>{{ 0.4567 | numberFormat({ decimal: 2, suffix: '%' }) }}</div> <!-- 输出：45.67% --> </template> ``` ### 四、典型配置示例 ```javascript // 货币格式 formatNumber(1234567.89, { prefix: '¥', decimal: 2, thousandSeparator: true }) // 输出：¥1,234,567.89 // 百分比格式 formatNumber(0.4567, { suffix: '%', decimal: 1 }) // 输出：45.7% // 大额数值展示 formatNumber(123456789, { decimal: 0, thousandSeparator: true }) // 输出：123,456,789 // 小数简化 formatNumber(1234.5678, { decimal: 1, thousandSeparator: false }) // 输出：1234.6 ``` ### 五、扩展功能建议 1. **国际化支持**：可集成`vue-i18n`实现多语言数字格式 2. **范围格式化**：自动切换单位（万/亿）的智能格式化 3. **输入验证**：结合正则表达式进行格式预校验 4. **性能优化**：添加缓存机制提升高频调用性能 5. **类型增强**：使用TypeScript强化参数类型检查[^3]