前端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.33const 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); // falseconst num3 = numberBox.isGreater0('33.23s'); console.log('33.23s是大于0的数字吗?', num3); // falseconst 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);  // falseconst 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.mzph.cn/web/4503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Win32 API 光标隐藏定位和键盘读取等常用函数

Win32 API 光标隐藏定位和键盘读取等常用函数 一、Win32 API二、控制台程序指令modetitlepausecls 三、控制台屏幕上坐标的结构体COORD四、句柄获取函数GetStdHandle五、控制台光标操作1.控制台光标信息结构体CONSOLE_CURSOR_INFO2.得到光标信息函数GetConsoleCursorInfo3. 设置…

【Java数据结构】深入解析ArrayList与顺序表

【Java数据结构】深入解析ArrayList与顺序表 1.前言~🥳🎉🎉🎉 2.ArrayList的介绍 3.使用ArrayList 3.1 ArrayList的构造方法 3.11 第一个构造方法 3.12第二个构造方法 3.13第三个构造方法 3.2ArrayList中的tostring方…

Spring IOC(一)

1. Spring IOC入门 1.1 什么是Spring IoC IoC(Inversion of Control),即控制反转,是一种设计原则。简单来说,IoC就是将程序的某种传统控制流程反转了。 在Spring框架中,控制反转体现在对象的创建和管理上。…

jsp servlet 学生信息管理系统

一、角色划分 1、超级管理员 2、学生 二、模块展示 1、登录 2、列表页面【超级管理员展示所有用户信息、学生只展示当前登录用户信息】 3、新增 4、编辑 三、数据库【mysql】 四、运行演示 jsp servlet 学生信息管理系统

rust疑难杂症解决

rust疑难杂症解决 边碰到边记录,后续可能会逐步增加,备查 cargo build时碰到 Blocking waiting for file lock on package cache 原因是Cargo 无法获取对包缓存的文件锁, 有时vscode中项目比较多,如果其中某些库应用有问题&…

CSS 之 transition过渡动画

一、简介 ​ CSS 制作 Web 动画有两种方式: 帧动画(Keyframe Animation)和过渡动画(Transition Animation)。针对不同的业务场景中,我们应该选择不同的动画方式,通常来说:对于交互元…

vue3插槽的name和v-slot的研究

slot可以分为具名插槽和默认,默认插槽name是default 在父组件的template需要些v-slot/#,没写不生效,而在父组件下,而没被template包含的默认放在template且含有#default. 1)没写slot,可以不写template,也可写default的template2)写了name的slot,即使是default也必须些template…

STM32G431RBT6之LCD与LED配置

首先,配置时钟树,时钟树的配置在我的另外一篇博客里,这里不再赘述. LCD与LED具有共同的IO口,同时创建工程较好. 打开原理图,发现LED的IO口是PC8~PC15,还有一个容易看漏的PD2.LCD的IO口是PC0到PC15. 当然,看产品手册也可以知道,但是还是推荐大家看原理图. 打开cubumx,给PC0~PC…

Java设计模式 _结构型模式_过滤器模式

一、过滤器模式 1、过滤器模式 过滤器模式(Filter Pattern)是这一种结构型设计模式。过滤器,顾名思义,就是对一组数据进行过滤,从而最终获取到我们预期的数据。 2、实现思路 (1)、定义过滤器的…

想要应聘前端工程师——学习路线指南

前端工程师学习路线 按照前端岗位需求,以优先学习工作更需要,面试更常考的内容为原则,由浅入深,层层铺垫,与时俱进,可以较容易地总结出前端学习路线图: HTML / CSS / JavaScript 基础学习 《Web 入门》 MDN 权威入门指南,HTML / CSS / JavaScript 快速上手 《CSS 世界…

华为OD机试 - 密码解密(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷C卷)》。 刷的越多,抽中的概率越大,每一题都有详细的答题思路、详细的代码注释、样例测试…

ChatGPT/GPT4 科研实战教程-包括论文写作、数据分析、科研绘图、PPT制作,程序开发

从2022年3月,OpenAI公司发布chatGPT3.5开始,以ChatGPT为代表的人工智能内容生成技术(简称AIGC)引起了广泛关注,我们进入了全民AI时代。 因此,我们需要了解和掌握AI思维,才能更好适应这个时代的…

uniapp微信小程序-分享

https://developers.weixin.qq.com/miniprogram/dev/component/button.html https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95 参考未整理 自定义参考未整理

使用Canal实现MySQL主从同步

说明:本文介绍如何使用Canal实现MySQL主从同步的效果,关于Canal入门使用参考:Canal入门使用 启动Canal 首先,设置Canal服务器里,目标节点(即监测的MySQL节点)的配置,启动Canal服务…

Scala 03 —— Scala OOP Extension

Scala 2.1 —— Scala OOP Extension 一、正则 文章目录 Scala 2.1 —— Scala OOP Extension一、正则1.1 Java正则和Scala正则的区别1.2 Java正则和Scala正则的的基本知识点Java正则Scala正则 1.3 练习练习一:使用正则表达式解析日志方法一:使用findAl…

心理学上有个概念叫:习惯性反驳(附上解决办法)

在心理学上,有一个词,叫做习惯性反驳。 什么意思呢? 就是不管你说什么,他都要反驳你,最后把你带入负面的情绪黑洞,搞得你非常崩溃。 一个总是习惯性反驳的人,其实是非常可怕的。 习惯性反驳的3个…

与Apollo共创生态:Apollo7周年大会自动驾驶生态利剑出鞘

前言 4月22日,百度Apollo在北京车展前夕举办了以“破晓•拥抱智变时刻”为主题的智能汽车产品发布会,围绕汽车智能化,发布了智驾、智舱、智图等全新升级的“驾舱图”系列产品。 1、7周年大会 自2013年百度开始布局自动驾驶,201…

PotatoPie 4.0 实验教程(24) —— FPGA实现摄像头图像中心差分变换

为什么要对图像进行中心差分变换? 对图像进行中心差分变换的主要目的是计算图像中每个像素点的梯度。梯度在图像处理中是一个非常重要的概念,它可以用来描述图像中灰度变化的快慢和方向,常用于边缘检测、特征提取和图像增强等任务中。 具体…

windows服务启动提示‘服务没有响应控制功能’(mysql启动报错)

在安装mysql的时候,在windows服务项启动 或 使用命令net start mysql 时启动是报错,提示 服务没有响应控制功能 发生原因: Windows10 x64 或 更高的操作系统,有些系统缺少一些组件 解决办法: 1、下载最新的 Microsoft …

clickhouse安装部署

虚拟机:virtualbox7.0 操作系统:ubuntu server 22.04.3 虚拟机硬件:cpu 1,内存 2G, 硬盘 100G 采用默认安装 参照 https://clickhouse.com/docs/en/install#quick-install 安装部署 对于Debian、Ubuntu&#xff0c…