IT袋

当前位置:主页 > 经验教程 > 建站编程 >

js分割函数

js分割函数 新手js切割字符串有的方法

更新:2023-08-25 16:08:08 来源:IT袋 作者:苏晓敏
导读:js分割函数,这些方法你知道吗?js分割函数和新手js切割字符串有的方法的IT知识,请看下面详细的介绍。 在项目开发中需要js实现千位分隔符来分割一个整数,比如我想将数字 1234

js分割函数

这些方法你知道吗?js分割函数和新手js切割字符串有的方法的IT知识,请看下面详细的介绍。

在项目开发中需要js实现千位分隔符来分割一个整数,比如我想将数字 1234567 显示为“1,234,567”。我该怎么实现呢?

方法一、利用循环

实现思路是将数字转换为字符数组,再循环整个数组, 每三位添加一个分隔逗号,最后再合并成字符串。

function numberWithCommas(x) { x = x.toString(); var pattern = /(-?\d+)(\d{3})/; while (pattern.test(x)) x = x.replace(pattern, "$1,$2"); return x;}numberWithCommas(12312124545);//'12,312,124,545'numberWithCommas(123121245.45);//'123,121,245.45'

方法二、toLocaleString

Number.prototype.toLocaleString。它是在 JavaScript 1.5(于 1999 年推出)中实现的,因此基本上所有主要浏览器都支持它。

var num = 12345.1234num.toLocaleString();//'12,345.123'

注意的是这个函数在没有指定区域的基本使用时,返回使用默认的语言环境和默认选项格式化的字符串,所以不同地区数字格式可能会有一定的差异。最好确保使用 locales 参数指定了使用的语言。

注:我测试的环境下小数部分会根据四舍五入只留下三位。比如:

var b=1234.4542;b.toLocaleString();//'1,234.454'

方法三、正则表达式和replace函数

使用正则表达式和replace函数,相对前两种我更喜欢这种方法,虽然正则有点难以理解。

function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

正则表达式使用 2 个前瞻断言:

一个正数,用于在字符串中查找其后连续 3 位数字的任何点,一个否定断言,以确保该点只有 3 位数字的倍数。替换表达式在那里放置一个逗号。

注意:这个函数如果小数点后有超过3位数字的话,会在不需要的地方添加逗号。如果这是一个问题,您可以使用此功能。

function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join(".");}

更简洁,最终代码:

function numberWithCommas(x) { return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");}

方法四:Intl.NumberFormat

原生js功能。支持 IE11、Edge、最新的 Safari、Chrome、Firefox、Opera、iOS 上的 Safari 和 Android 上的 Chrome。

可以把普通的数字,转换成不同的货币和格式样式字符串。

let number = 1234567890;let nf = new Intl.NumberFormat('en-US');nf.format(number); // "1,234,567,890"

更多实例:

var number = 123456.789;console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));// expected output: "123.456,79 €"// the Japanese yen doesn't use a minor unitconsole.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));// expected output: "¥123,457"// limit to three significant digitsconsole.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));// expected output: "1,23,000"

上述的关于js分割函数 跟 新手js切割字符串有的方法的IT小经验,希望能为您在生活中带来帮助!

相关阅读

  • 个人网站制作步骤 网页设计与制作教程

    个人网站制作步骤 网页设计与制作教程

    小编为你解答个人网站制作步骤和网页设计与制作教程方面的知识,一起来看看吧! 随着各种网页制作工具的普及,现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单,但

  • 免费网站怎么做出来的 网页制作正版网站

    免费网站怎么做出来的 网页制作正版网站

    本文摘要:免费网站怎么做出来的和网页制作正版网站的相关知识,请看下面详细的介绍。 在不懂设计知识、也不懂技术的情况下,小白可以做出好看的网站吗?当然也是可以的,而且通过

  • 网站建设的基本流程包括哪些 简述网站建设的步骤过程

    网站建设的基本流程包括哪些 简述网站建设的步骤过程

    文章摘要:网站建设的基本流程包括哪些和简述网站建设的步骤过程的教程内容,接下来小编为网友介绍。 随着互联网的快速发展,网站建设也成为了越来越多企业和组织的必备工具。通过建

  • 办网站需要什么手续和证件 建立网站需要的条件

    办网站需要什么手续和证件 建立网站需要的条件

    正文核心介绍:办网站需要什么手续和证件和建立网站需要的条件IT技巧方面的经验,接下来一起来看看吧。 目前许多企业都在进行网站建设,要知道网站建设时间与做网站建设步骤,前期做