前端JS必用工具【js-tool-big-box】,Number数值转换的方法调用学习

这一小节,我们针对前端工具包(npm)js-tool-big-box的使用做一些讲解,主要是针对Number数值型转换的一些方法使用。

 

目录

前言

1 安装和引入

2 千位逗号分割

3 判断是否大于0

 4 判断是否大于0的整数

5  生成指定范围内的随机数

6 生成指定位数的随机数字 

7 数字转中文

7.1 小写中文

7.2  大写中文

7.3 使用方法总结 


前言

在前端项目中,经常会涉及到一些数值转化的公共方法,而js-tool-big-box 这个工具包里也都包含了,可以直接使用,例如千位分割,保留小数位,生成指定范围内的随机数,转中文大写,中文小写这些,可以说是非常便捷高效,堪称AIGC PLUS。

1 安装和引入

执行安装命令

npm i js-tool-big-box

项目中引入,工具包对外提供了 numberBox 对象,可以用来调用一些数值类型转化的方法。

import { numberBox } from 'js-tool-big-box';

 

2 千位逗号分割

例如数值很长,我们就需要做千位分割,有时候还会保留一些小数位数,使用示例代码如下:

const num1 = numberBox.formatNumberWithCommas(13498345.333, 2);
    console.log('num1转化后:', num1); // 13,498,345.33
    const num11 = numberBox.formatNumberWithCommas(13498345.333);
    console.log('num11转化后:', num11); // 13,498,345

使用方法总结:

 

方法名返回值入参
formatNumberWithCommas带有逗号的数字字符串

第一个参数必填,表示需要转换的数值,可以是数值类型,可以是数值字符串类型,

第二个参数非必填,表示小数点后需要带有几位小数,不填则没有小数

 

 

3 判断是否大于0

这个方法只判断数字是否是大于0的,不管是不是整数,示例代码如下:

const num2 = numberBox.isGreater0('-33.23');
    console.log('-33.23是大于0的数字吗?', num2); // false
    const num3 = numberBox.isGreater0('33.23s'); 
    console.log('33.23s是大于0的数字吗?', num3); // false
    const num33 = numberBox.isGreater0(2024); 
    console.log('2024是大于0的数字吗?', num33); // true

使用方法总结:

方法名返回值入参
isGreater0true或者false第一个参数必填,表示需要判断的数值,可以是数值型,可以是数值字符串型

 

 4 判断是否大于0的整数

这个方法不仅需要判断是否大于0,也需要判断是否是大于0且是一个整数,示例代码如下:

const num4 = numberBox.isGreater0Integer('33.23');
    console.log('33.23是大于0的整数吗?', num4);  // false
    const num5 = numberBox.isGreater0Integer(99);
    console.log('99是大于0的整数吗?', num5);  // true

 

使用方法总结:

方法名返回值入参
isGreater0Integertrue或者false第一个参数必填,表示需要判断的数值,可以是数值型,可以是数值字符串型

5  生成指定范围内的随机数

用户可以指定范围内,生成一个随机数,示例代码如下:

// 生成80到100的随机整数
    const num6 = numberBox.getRandomNumber(80, 100);
    console.log('80到100的随机整数::', num6);
    // 生成50到56并带有2位小数的随机数
    const num7 = numberBox.getRandomNumber(50, 56, 2);
    console.log('50到56并带有2位小数的随机数::', num7);

使用方法总结:

方法名返回值入参
getRandomNumber指定范围内的随机的数值

第一个参数必填,表示起始范围的数字;

第二个参数必填,表示结束范围的数字;

第三个参数非必填,表示如果需要保留小数位的话,那个小数位的位数

6 生成指定位数的随机数字 

上面是指定了范围,这个是指定位数,比如我要生成 5 位或者 6 位的一个随机数字,示例代码如下:

// 生成一个4位的随机数字
    const num66 = numberBox.generateUniqueRandomNumber(4);
    console.log('生成的4位的随机数字:', num66);
    // 生成一个6位的随机数字
    const num77 = numberBox.generateUniqueRandomNumber(6);
    console.log('生成的6位的随机数字:', num77);

使用方法总结:

方法名返回值入参
generateUniqueRandomNumber指定位数的数字第一个参数必填,表示需要生成随机数的位数

7 数字转中文

很多时候,数字需要转成中文,同时也区分 大写中文 和 小写中文

7.1 小写中文

也就是说 123 转成 一百二十三 这样,示例代码如下:

const num8 = numberBox.numberToChinese('456788.12');
    console.log('看一下456788.12的中文小写展示:', num8);
    const num9 = numberBox.numberToChinese(122456788.5);
    console.log('看一下122456788.5的中文小写展示:', num9);

 

7.2  大写中文

也就是说 123 转成 壹佰贰拾叁 这样,示例代码如下:

const num10 = numberBox.numberToChinese(22456788.5, 'upper');
    console.log('看一下22456788.5的中文大写展示:', num10);

7.3 使用方法总结 

数字转中文,大写或者小写的方法是同一个,通过入参来管理返回

方法名返回值入参
numberToChinese转换后的大小中文数字,或者小写中文数字

第一个参数必填,表示需要被转换的数值,可以是数值型,也可以是数值字符串型;

第二个参数非必填,表示需要转小写中文还是大写中文,如果不传,默认转小写,如果需要转大写,需要特定传入字符串“upper

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/580787.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 循环列表的插入(Python)

题目如果不进行思考&#xff0c;巨多坑。 首先我们需要找到列表中的最小值&#xff0c;最大值这个节点&#xff0c;因为找到后可以与我们的新元素进行比较厚插入。 找到最小值&#xff0c;最大值需要循环一遍列表&#xff0c;如果当前cur元素的值<nex元素的值&#xff0c;…

堆的应用——堆排序

堆排序 堆排序是一种基于比较的排序算法&#xff0c;它利用堆这种数据结构所设计。堆是一个近似完全二叉树的结构&#xff0c;并同时满足堆积的性质&#xff1a;即子结点的键值或索引总是小于&#xff08;或者大于&#xff09;它的父结点。 堆排序可以分为两个主要步骤&#…

smart200 做client,modbus_tcp读取modbus_slave

这里还隐藏一个重要的设置&#xff0c;就是站地址。这个在库函数里。不同plc位置会不一样&#xff0c;我这里是vb1651对应modbus的地址为255&#xff0c;这个值我们可以自己更改&#xff0c;范围为1-247. 打开modbus_slave 软件&#xff0c;

【C#】rdlc报表答应报错:未能加载文件或程序集“Microsoft.SqlServer.Types

文章目录 一、报错信息二、解决方式 一、报错信息 Microsoft.Reporting.WinForms.LocalProcessingException: An error occurred during local report processing. —> Microsoft.Reporting.DefinitionInvalidException: The definition of the report ‘’ is invalid. —&…

sql注入漏洞及其sqlmap工具的使用

一、sql注入的原理 sql注入概念&#xff1a; sql注入主要是将sql语句&#xff0c;插入到web表单提交或者输入域名或者页面请求的查询字符串&#xff0c;最 终 达到一个欺骗服务器执行sql语句的效果。 sql注入的原理&#xff1a;主要分为平台层注入和代码层注入两种原因 …

stm32的GPIO基本结构

1.带FT标号的引脚能容忍5V 2.GPIO系统架构 stm32的所有GPIO都是挂载在APB2总线上的 3.GPIO的基本结构 在上图中&#xff0c;左边就是寄存器&#xff0c;右边就是驱动器了 保护二极管的作用&#xff1a;VDD表示3.3V&#xff0c;如果输入的电压的值大于3.3V&#xff0c;那么这个…

百度网盘某个文件对外开放怎么弄通过密码下载文件对外开放某个文件

百度网盘某个文件对外开放怎么弄通过密码下载文件对外开放某个文件 百度云盘分享文件(创建公开连接)的方法&#xff1a; 1、登录网页&#xff0c;打开百度云盘&#xff0c;并登陆自己的帐号。 2、上传后选择自己需要分享的文件。 选择分享的文件 3、将鼠标放在需要分享的文…

上市企业数字赋能指数数据集-2001到2022年(TF-IDF)

01、数据简介 上市公司数字赋能指数是一个用来衡量上市公司利用数字技术提高业务能力和效率的指标。这个指数反映了上市公司利用大数据、云计算和人工智能等数字技术&#xff0c;高效地利用商业资源和信息&#xff0c;并扩展供应关系的能力。市公司数字赋能指数是一种综合性的…

【Linux】组管理命令

在Linux系统中&#xff0c;组管理是一种重要的权限管理机制&#xff1a; 权限分配的灵活性&#xff1a;通过将用户组织成不同的组&#xff0c;管理员可以更轻松地管理用户的权限。这样&#xff0c;管理员可以根据组的角色或特定任务来分配权限&#xff0c;而不必逐个用户进行设…

大数据时代的引擎:大数据架构随记

大数据架构通常可以分为以下几层&#xff1a; 一、数据采集层 负责从各种数据源采集、清洗、转换、丰富以及格式化数据&#xff0c;可能包括结构化、半结构化和非结构化的数据。 1.1、常用的技术 在大数据领域&#xff0c;数据采集是一个关键的环节&#xff0c;常用的数据采集…

Spring框架宝典:彻底理解三级缓存策略

一、循环依赖概念 在Spring应用中&#xff0c;循环依赖指的是两个或多个Bean之间相互引用&#xff0c;造成了一个环状的依赖关系。举例来说&#xff0c;如果Bean A依赖于Bean B&#xff0c;同时Bean B也依赖于Bean A&#xff0c;就形成了循环依赖。这种情况下&#xff0c;Sprin…

数据库介绍(Mysql安装)

前言 工程师再在存储数据用文件就可以了&#xff0c;为什么还要弄个数据库? 一、什么是数据库&#xff1f; 文件保存数据有以下几个缺点&#xff1a; 文件的安全性问题文件不利于数据查询和管理文件不利于存储海量数据文件在程序中控制不方便 数据库存储介质&#xff1a; 磁…

【Canvas与艺术】绘制朝鲜国旗

【声明】 该国旗的定位和大小是本人与网上照片比对后估算的&#xff0c;不是精确值。 【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <hea…

四信智能化感知与控制方案,助推灌区续建配套与现代化改造建设

“十四五”明确提到推进大中型灌区节水改造和精细化管理&#xff0c;建设节水灌溉骨干工程&#xff0c;同步推进水价综合改革。 灌区是保障国家粮食安全的重要基础性设施&#xff0c;是实施乡村振兴战略的水利支撑。灌区续建配套与现代化改造是实施乡村振兴战略一项重要任务。为…

一套JAVA语言开发的:危大工程智慧一体化工地系统源码,(后台管理端+APP+可视化大屏端)

智慧工地是指利用移动互联、物联网、智能算法、地理信息系统、大数据挖掘分析等信息技术&#xff0c;提高项目现场的“人•机•料•法•环•安”等施工要素信息化管理水平&#xff0c;实现工程施工可视化智能管理&#xff0c;并逐步实现绿色生态建造。 相关技术&#xff1a;微…

“百团大战”下,20年代的国产数据库如何乘风破浪?

引言 在数字化浪潮的推动下&#xff0c;数据库技术已成为支撑数字经济的坚实基石。腾讯云 TVP《技术指针》联合《明说三人行》特别策划的直播系列——【中国数据库前世今生】&#xff0c;我们将通过五期直播&#xff0c;带您穿越五个十年&#xff0c;深入探讨每个时代的数据库演…

vue3.0(四) ref全家桶以及响应的 源码分析

文章目录 1 ref1.1 ref() 是什么1.2 ref() 特点1.3 创建响应式数据1.4 引用DOM元素1.5 深层响应性1.6 DOM 更新时机1.7 ref源码 2 isRef2.1 isRef运用2.2 isRef源码 3 unref3.1 unref运用3.2 unref源码 4 shallowRef4.1 shallowRef运用4.2 shallowRef源码 5 triggerRef5.1 trig…

SpringCloud系列(10)--Eureka集群原理及搭建

前言&#xff1a;当注册中心只有一个&#xff0c;而且当这个注册中心宕机了&#xff0c;就会导致整个服务环境不可用&#xff0c;所以我们需要搭建Eureka注册中心集群来实现负载均衡故障容错 Eureka架构原理图 1、Eureka集群原理 2、创建Eureka Server端服务注册中心模块 (1)在…

ios微信小程序禁用下拉上拉

第一步&#xff1a; page.json配置页面的"navigationStyle":"custom"属性&#xff0c;禁止页面滑动 "navigationStyle":"custom" 第二步&#xff1a; 页面里面使用scroll-view包裹内容&#xff0c;内容可以内部滑动 <view class&…

LLaMA 3:大模型之战的新序幕

作者 | 符尧 OneFlow编译 翻译&#xff5c;杨婷、宛子琳、张雪聃 本文要点概览&#xff1a; 文本数据的扩展可能已经达到了极限&#xff0c;因为易于获取的网络文本资源&#xff08;如Common Crawl、GitHub、ArXiv等&#xff09;已基本被充分利用。 尽管如此&#xff0c;通过更…
最新文章