【JavaScript手撕代码】千分位分割

最新推荐文章于 2026-01-05 12:22:51 发布

原创

最新推荐文章于 2026-01-05 12:22:51 发布 · 704 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面试 #前端

文章描述了一个JavaScript函数，用于将数字按照给定长度进行格式化，当数字不是3的整数倍时，会保留部分小数位。该函数适用于处理数值显示的优化，提高可读性。

function format(n, cut=3) {
   
   
    let num = n.toString()
    let decimals = ''
    // 考虑小数
    num.indexOf('.'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

六时二一

关注关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

JavaScript正则表达式实现货币数字千分位分割

猿小白的博客

03-31

949

样例输入1：num1 = "20010320.888888888"样例输入2：num2="20010320"样例输出1：20,010,320.888888888样例输出2：20,010,320题目解释：整数部分用千分位分割，小数部分不需要分割，需要考虑值是负数的情况。限制条件：请使用正则表达式来解决这个问题。

【JavaScript手撕代码】浅拷贝的五种实现

前端小白, 稀土：雩风十六

12-05

654

五种方式实现浅拷贝，附详解

参与评论您还未登录，请先登录后发表或查看评论

12道面试官爱考的手撕代码题，你会了吗？

weixin_42247274的博客

10-12

1446

1.防抖与节流防抖（debounce）：当持续触发事件时，一定时间内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 //举个栗子 function debounce（fn,wait）{ var timeout = null; return function(){ if(timeout ! == null) clearTimeout(timeout); timeout = setTimeout(fn,wait); } } //处理函

JS实现数字千分位分割（手写纯享版）

向梦想前进

11-22

1051

千分位格式化是前端开发中一个常见而有用的需求。通过使用上述简单的 JavaScript 函数。希望本文对您理解和实现千分位格式化有所帮助！

手撕前端题目

祥哥的说

05-24

1258

前端手撕代码汇总

前端面试题及答案整理（2022最新版）

最新发布

GhostPaints的博客

01-05

636

最近在维护一个基于 Vue 2 的老项目（RuoYi-Vue 框架衍生）时，遇到一个特别诡异的编译问题：同一个项目，使用 pnpm run dev（连接测试环境）一切正常，但切换到 pnpm run dev:local（连接本地后端）时，启动就直接报错，错误信息指向 template 中的可选链运算符?这让我百思不得其其解——Vue 2.7 明明官方支持 template 中的?.，为什么本地环境就炸了？。

vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）

qq_43730272的博客

12-31

316

vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）

vue2 基于虚拟dom的下拉选择框，保证大数据不卡顿，仿antd功能和样式

licongmingli的博客

12-31

647

本文介绍了一个基于Vue2和Ant Design 1.7.8的虚拟列表下拉选择框组件的封装实现。由于Ant Design原生组件不支持虚拟列表功能，作者结合vue-virtual-scroller和vue-select封装了一个支持多选/单选/清除/搜索功能的选择框组件。文章详细说明了组件实现的技术难点：包括动态挂载DOM的方式解决模板渲染问题、样式适配Ant Design风格的改造过程，以及当前存在的待优化项（下拉列表脱离文档流问题）。组件通过计算属性和监听机制实现了数据同步，并提供了完整的代码示例展示核

A2A协议与LangChain.js实战：构建微型软件工厂

Web分享

01-01

999

随着多智能体（Multi-Agent）系统的兴起，单纯的工具调用（Tool Use）已无法满足复杂协作需求。本文将探讨从 MCP（Model Context Protocol）到 A2A（Agent-to-Agent）协议的演进，解析去中心化智能体通信的设计模式，并利用 LangChain.js、Express 和 JSON-RPC 2.0 构建一个包含 PM、Dev、QA 的分布式“微型软件工厂”。

【鸿蒙】web 加载vue dist 包里的 html

产品：SmartApi；服务：大前端++；其他技术分享

01-05

148

下面给你「带进度条 + 判断 index.html 已存在则跳过解压」的完整可运行版本，直接替换即可通过 ArkTS 校验。

测试框架介绍：Jest、Mocha 等对比 ### 工程化与模块化

专注技术分享

12-31

559

本文对比了几种常见 JavaScript 测试框架。核心如 Jest 零配置，内置多功能；Mocha 灵活，可结合多库。创新在于不同框架特性适配不同场景。适用于前端项目测试，能提升代码质量与可维护性。建议 React、Vue 项目用 Jest，需灵活配置选 Mocha，小型项目可选 Tape 或 Jasmine，未来将注重性能与集成。

Vue3中v-if与v-show的本质区别及动态组件状态保持的关键策略是什么？

https://blog.cmdragon.cn/

12-30

1584

特性v-ifv-showDOM存在与否销毁/重建始终存在切换成本高（销毁重建）低（改CSS）初始渲染成本低（不满足则不渲染）高（必渲染）适用场景切换频率低（如权限控制）切换频率高（如tab切换）

Flutter Web性能优化标签解析（二）

qq_30279137的博客

01-04

729

立即显示：HTML 加载后立即显示加载界面保持简单：使用纯 CSS 动画，减少资源依赖提供反馈：显示进度或状态信息平滑过渡：使用淡出效果，避免突兀消失错误处理：考虑加载失败的情况超时保护：避免永远显示加载界面这个方案能显著提升 Flutter Web 应用的用户体验，让用户感觉应用加载更快、更专业。

千分位分割带小数

10-30

<think>首先，用户查询的是“千分位分割带小数的实现方法”，具体是关于JavaScript中使用正则表达式实现货币数字的千分位分割。回顾系统级指令： - 所有行内数学表达式使用 `$...$` 格式。 - 独立公式使用 `$$...$$` 并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如：[^1]。用户提供了站内引用[^1]，其中包含一段代码示例，实现了带小数的千分位分割。代码使用正则表达式：`/(?<!.*\..*)(\d)(?=(\d{3})+($|\.))/g`。用户说：“参考站内引用:引用[1]:JavaScript正则表达式实现货币数字千分位分割。” 然后列出了代码和解释。用户最后说：“我想查询千分位分割带小数的实现方法”，所以我需要基于这个引用提供答案。用户指示：“上述引用仅供参考，并不是用户真正的需求，请尽可能多的参考用户上一次的问题和你的回答。” 但在这个对话历史中，用户的上一次问题就是这条消息本身，没有之前的互动。所以，我应该专注于当前用户的查询。关键点： - 用户想知道如何实现带小数的千分位分割。 - 引用[^1]中已经有一个实现。我需要： 1. **解释代码**：因为用户提供了代码和解释，我应该用中文解释清楚这个正则表达式是如何工作的。 2. **确保真实可靠**：提供准确的信息。 3. **结构清晰**：逐步解释。 4. **添加引用标识**：在引用的段落末尾添加[^1]。 5. **生成相关问题**：在回答的最后，添加相关问题部分。回答结构： - 引言：简述千分位分割的目的和应用。 - 详细解释代码：分解正则表达式部分。 - 展示代码示例：使用引用中的代码。 - 输出结果：显示示例输出。 - 相关问题。用户提供的代码： ```javascript let r1='20010320.888888888'.replace(/(?<!.*\..*)(\d)(?=(\d{3})+($|\.))/g, '$1,'); let r2='20010320'.replace(/(?<!.*\..*)(\d)(?=(\d{3})+($|\.))/g, '$1,'); console.log(r1); console.log(r2); ``` 输出： - r1: "20,010,320.888888888" - r2: "20,010,320" 正则表达式解释： - `/(?<!.*\..*)` : 负向零宽断言，匹配前面没有小数点的位置（即整数部分）。 - `(\d)` : 匹配一个数字。 - `(?=(\d{3})+($|\.))` : 正向零宽断言，匹配后面有3的倍数的数字，直到小数点或字符串结束的位置。 - `g` : 全局匹配。 - `'$1,'` : 替换时保留匹配到的数字并在其后加逗号。在回答中，我需要： - 使用中文。 - 确保LaTeX语法正确：尽管这不是数学表达式，但如果有数学概念可以用上。 - 生成相关问题：例如，关于优化、错误处理、其他方法等。相关问题想法： 1. 如何处理负数？ 2. 如何优化性能？ 3. 是否可以使用其他方法实现千分位分割？ 4. 如何处理国际化数字格式？最终回答结构： 1. 介绍千分位分割。 2. 详细解释正则表达式。 3. 提供代码示例。 4. 展示输出。 5. 添加相关问题。 </think>### JavaScript实现数字千分位分割（带小数） 千分位分割是一种常见的格式化数字方法，常用于货币显示（如20,010,320.888），它将整数部分每三位添加一个逗号分隔符，小数部分保持不变。下面基于引用[^1]提供的JavaScript正则表达式实现，我将逐步解释带小数的千分位分割方法。实现的核心是利用正则表达式的零宽断言（lookaround）来精确匹配整数部分的位置。 #### 正则表达式详解正则表达式：`/(?<!.*\..*)(\d)(?=(\d{3})+($|\.))/g` 这个表达式通过以下部分确保只处理整数部分（小数部分不分割）： - **`(?<!.*\..*)`**：负向零宽断言（negative lookbehind），匹配前面不含有小数点`.`的位置（即只针对整数部分）。例如，在字符串`"20010320.888"`中，它避免匹配小数点后的数字[^1]。 - **`(\d)`**：匹配一个数字字符（例如`2`, `0`, `1`等），作为替换的目标。 - **`(?=(\d{3})+($|\.))`**：正向零宽断言（positive lookahead），匹配后面跟随3的倍数个数字（如`000`或`103`），直到遇到小数点`.`或字符串结尾。例如，在`20010320`中，它确保匹配每三位数字的边界。 - **`g`**：全局匹配标志，替换所有符合条件的匹配项。 - **替换字符串`'$1,'`**：将匹配到的数字（`$1`）保留，并在其后添加逗号`,`。这个表达式确保了小数部分不被分割（例如，输入`20010320.888888888`时，小数部分`.888888888`保持不变），仅对整数部分添加千分位分隔符。 #### 示例代码以下是引用[^1]提供的完整代码实现，适用于带小数的数字： ```javascript // 带小数的示例 let r1 = '20010320.888888888'.replace(/(?<!.*\..*)(\d)(?=(\d{3})+($|\.))/g, '$1,'); console.log(r1); // 输出: "20,010,320.888888888" // 不带小数的示例（整数） let r2 = '20010320'.replace(/(?<!.*\..*)(\d)(?=(\d{3})+($|\.))/g, '$1,'); console.log(r2); // 输出: "20,010,320" ``` #### 代码输出结果 - **输入 `20010320.888888888`**：输出 `"20,010,320.888888888"`（整数部分分割，小数部分原样保留）。 - **输入 `20010320`**：输出 `"20,010,320"`（纯整数分割）。这个实现高效且可靠，利用了正则表达式的零宽断言避免不必要的匹配，时间复杂度约为 $O(n)$（n为字符串长度），适用于大多数前端场景[^1]。 #### 注意事项 - **浏览器兼容性**：负向零宽断言（`?<!`）在较老浏览器（如IE）中可能不支持，建议在现代浏览器（Chrome, Firefox, Edge）中使用。 - **错误处理**：如果输入非数字字符串（如`"abc"`），表达式不会匹配，返回原字符串（可通过前置验证处理）。 - **优化建议**：对于大数字，正则表达式性能良好；但必要时可改用数值计算或`Intl.NumberFormat` API（提供国际化支持）。