这一小节,我们针对前端工具包(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
使用方法总结:
方法名 | 返回值 | 入参 |
isGreater0 | true或者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
使用方法总结:
方法名 | 返回值 | 入参 |
isGreater0Integer | true或者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” |