Web前端最新JavaScript常用工具类整理（总结版），2024年最新阿里巴巴前端面试都问些什么

[22.金额自动加","分割(v_money 要格式化的金额,need_dot 是否需要精确到小数点后2位,{String} 格式化以后的金额，如：1,234,567.08)](about:blank#22.%E9%87%91%E9%A2%9D%E8%87%AA%E5%8A%A8%E5%8A%A0%22%2C%22%E5%88%86%E5%89%B2%28v_money%C2%A0%E8%A6%81%E6%A0%BC%E5%BC%8F%E5%8C%96%E7%9A%84%E9%87%91%E9%A2%9D%2Cneed_dot%C2%A0%E6%98%AF%E5%90%A6%E9%9C%80%E8%A6%81%E7%B2%BE%E7%A1%AE%E5%88%B0%E5%B0%8F%E6%95%B0%E7%82%B9%E5%90%8E2%E4%BD%8D%2C%7BString%7D%C2%A0%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A5%E5%90%8E%E7%9A%84%E9%87%91%E9%A2%9D%EF%BC%8C%E5%A6%82%EF%BC%9A1%2C234%2C567.08%29 “22.金额自动加”,“分割(v_money 要格式化的金额,need_dot 是否需要精确到小数点后2位,{String} 格式化以后的金额，如：1,234,567.08)”)

23.把金额数字转换为中文大写金额

24.生成验证码(len 验证码长度（默认：6）,{String} 生成的验证码,)

25.格式化账号显示(4位加空格)

26.格式化户名显示，2字屏蔽第1位，用*号代替，3字屏蔽第2位，用*号代替，3字以上，显示第1位和最后1位，其余用*号代替，最多使用5位*。

27.字符串替换

28.生成UUID（len UUID长度，默认标准36位，radix UUID基数，默认16）

35.按长度数组截取字符串，返回按长度分割成的字符串数组

36.按多长间隔截取字符串，n为长度，返回按长度分割成的字符串数组

37.格式化字符串

38.存期格式化

39.计算总页数，根据总条数和每页显示数（totalpage:总条数，pagesize：每页显示条数）

40.将‘YYYYMMDD’格式的字符串格式化成‘YYYY-MM-DD’的格式

47. 播放语音（src 语音文件url）

49.判断应用部署模式（CS | BS）

50.获取JS字符串字节数，str 要计算的字符串（str的字节数，中文占2个字节，英文占1个字节）

51.格式化手机号（11位手机号）

52.左补两位

[53.hex -> dsp（hex 十六进制压缩码如[0x12, 0x34, 0x56]， dsp 如 “123456”）](about:blank#53.hex%C2%A0-%3E%C2%A0dsp%EF%BC%88hex%C2%A0%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E5%8E%8B%E7%BC%A9%E7%A0%81%C2%A0%E5%A6%82%5B0x12%2C%C2%A00x34%2C%C2%A00x56%5D%EF%BC%8C%C2%A0dsp%C2%A0%E5%A6%82%C2%A0%22123456%22%EF%BC%89 “53.hex -> dsp（hex 十六进制压缩码如[0x12, 0x34, 0x56]， dsp 如 “123456”）”)

54.dsp -> hex

55.分量亦或合成（itemA 分量A，itemB 分量B，bDsp 是否扩展 true，则传入的itemA与itemB与返回的合成变量都为扩展码，否则都为Uint8Array类型的压缩码数组）

1.全局声明工具类

window. $A pp = w in d o w .$ App || {};

window.$App.AppUtils = (function () {

let apputils = {};

}

2.定时器

/**

定时器
@class Timer

apputils.Timer = ClassLoader.create();

apputils.Timer.prototype = {

initialize: function ($, A, _) {

this._h = null;

this.callback = $;

this.interval = A;

this.loop = _ ? true : false;

this.running = false

onTimer: function () {

if (!this.running) {

try {

this.running = true;

this.callback();

} finally {

this.running = false;

}

if (this.loop == false) {

this.stop();

}

stop: function () {

clearInterval(this._h);

start: function () {

this.stop();

this._h = setInterval(this.onTimer.bind(this), this.interval * 1000);

}

};

/**

启动定时器
@param {*} times 倒计时时间，单位：秒
@param {*} callback 倒计时完成回调函数
@param {*} repeat 是否循环执行
@returns {object} 定时器对象，支持方法：start、stop
@function startTimer

apputils.startTimer = function (times, callback, repeat) {

try {

var timer = new this.Timer(function () {

callback();

}, times, repeat);

timer.start();

return timer;

} catch (ajaxException) {

alert(ajaxException.message);

}

return null;

};

3.判断变量是否是一个值

function (o) {

return typeof (o) !== ‘undefined’ && o !== null ? true : false;

};

4.判断变量是否为空

function (val) {

var regu = “¹+$”;

var re = new RegExp(regu);

return val == null || typeof (val) == ‘undefined’ || val == “” || re.test(val);

};

5.判断变量是否为一个数组

function (o) {

return this.isvalue(o) ? Object.prototype.toString.apply(o) === ‘[object Array]’ :

false;

};

6.输入对象

function (o) {

return this.isarray(o) ? o.length : -1;

};

7.将object对象转化为数组

function (o) {

return this.isarray(o) ? o : new Array();

};

8.对象转字符串

function (o) {

var str = “”;

if (this.isvalue(o)) {

var t = Object.prototype.toString.apply(o);

if (t === ‘[object Array]’) {

let a = [];

for (var i = 0; i < o.length; i++) {

/**

此处原方法为a.push(this.tostring(o[i]));
当o为字符串数组是，返回的结果出错，因此做了如下修改

if (this.tostring(o[i]).charAt(0) == ‘{’) { //o为json数组时

a.push(this.tostring(o[i]));

} else { //o为字符串数组时

a.push(‘"’ + this.tostring(o[i]) + ‘"’);

}

str = ‘[’ + a.join(‘,’) + ‘]’;

a.length = 0;

// a = null;

} else if (t === ‘[object Date]’) {

var y = o.getFullYear();

if (y < 1900) {

y += 1900;

}

var m = o.getMonth() + 1;

str = y + “-” + this.lpad(m, 2, ‘0’) + “-” +

this.lpad(o.getDate(), 2, ‘0’) + " " +

this.lpad(o.getHours(), 2, ‘0’) + “:” +

this.lpad(o.getMinutes(), 2, ‘0’) + “:” +

this.lpad(o.getSeconds(), 2, ‘0’);

} else if (t === ‘[object Object]’) {

let a = [],

for (k in o) {

var vt = Object.prototype.toString.apply(o[k]);

if (vt === ‘[object Array]’ || vt === ‘[object Object]’) {

a.push(‘"’ + k + ‘":’ + this.tostring(o[k]));

} else {

a.push(‘"’ + k + ‘“:”’ + this.tostring(o[k]) + ‘"’);

}

str = ‘{’ + a.join(‘,’) + ‘}’;

a.length = 0;

// a = null;

} else {

str = String(o);

}

return str;

};

9.json字符串转json对象

function (str) {

if (str == null || str == “”) {

return “”;

}

if (str.charAt(0) != ‘(’) {

str = “(” + str + “)”;

}

return eval(str);

};

10.判断是否为数字

function (str) {

var regu = /^(\d+)$/;

return regu.test(str);

};

11.判断是否为整型

function (str) {

var regu = /²{0,1}[0-9]{1,}$/;

return regu.test(this.val(str));

};

12.判断是否为浮点型

function (str) {

if (this.isint(str))

return true;

var re = /³{0,1}(\d+)[.]+(\d+)$/;

if (re.test(str)) {

if (RegExp.$1 == 0 && RegExp.$2 == 0)

return false;

return true;

} else {

return false;

}

};

13.手机号验证

function (s) {

var patrn = /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;

return patrn.exec(s);

};

14.文本输入校验（中文、数字、字母、下划线、中文标点符号。；，： “ ”（）、？《》）

function (s) {

var patrn = /⁴*$/;

return patrn.exec(s);

};

15.左填充(str 原字符串,len 目标长度,pad 填充的字符（默认：空格）)

function (str, len, pad) {

str = this.tostring(str);

if (typeof (len) === “undefined”) {

len = 0;

}

if (typeof (pad) === “undefined”) {

pad = ’ ';

}

if (len + 1 >= str.length) {

str = Array(len + 1 - str.length).join(pad) + str;

}

return str;

};

16.右填充

function (str, len, pad) {

str = this.tostring(str);

if (typeof (len) === “undefined”) {

len = 0;

}

if (typeof (pad) === “undefined”) {

pad = ’ ';

}

if (len + 1 >= str.length) {

str = str + Array(len + 1 - str.length).join(pad);

}

return str;

};

17.消除空格

function (text) {

return (text || “”).replace(/^\s+|\s+$/g, “”);

};

18.json对象转form数据

function (json) {

var str = “”;

for (var i in json) {

str += “&” + i + “=” + json[i];

}

if (str.length > 1) {

str = str.substring(1);

}

return str;

};

19.IP有效验证

function (ip) {

var re = /(\d+).(\d+).(\d+).(\d+)/g; //匹配IP地址的正则表达式

if (re.test(ip)) {

var arr = ip.split(“.”);

if (arr[0] > 254 || arr[1] > 254 || arr[2] > 254 || arr[3] > 254)

return false;

return true;

} else {

return false;

}

20.ASCII转HEX

function (str) {

if (!this.isvalue(str)) {

return “”;

}

var hex = “”;

for (var i = 0; i < str.length; ++i) {

hex += str.charCodeAt(i).toString(16);

}

return hex;

}

21.HEX转ASCII

function (hex) {

if (!this.isvalue(hex) || hex.length % 2 != 0) {

return “”;

}

var str = “”;

for (var i = 0; i < hex.length / 2; ++i) {

var tmp = “0x” + hex[i * 2] + hex[i * 2 + 1];

var charValue = String.fromCharCode(Number(tmp));

str += charValue;

}

return str;

}

22.金额自动加","分割(v_money 要格式化的金额,need_dot 是否需要精确到小数点后2位,{String} 格式化以后的金额，如：1,234,567.08)

function (v_money, need_dot) {

try {

var p_number = parseFloat(v_money);

if(isNaN(p_number)) {

return v_money;

}

var p_string = “” + p_number;

var p_idx = p_string.lastIndexOf(“.”);

if (p_idx < 0) {

p_idx = p_string.length;

p_string = p_string + “.00”;

} else {

var sarray = p_string.split(‘.’);

if (sarray[1] == ‘’) {

p_string = p_string + “00”;

} else if (sarray[1].length == 1) {

p_string = p_string + “0”;

}

var p_ret = p_string.substring(p_idx);

var p_temp = p_string.substring(0, p_idx);

var p_length = p_temp.length;

var p_count = Math.ceil(p_length / 3);

for (var p_i = 0; p_i < p_count; p_i++) {

var p_start_i = p_length - (p_i + 1) * 3;

p_ret = p_temp.substring(p_start_i, p_start_i + 3) + p_ret;

if (p_i < p_count - 1) {

p_ret = “,” + p_ret;

}

if (need_dot == false) {

var len = p_ret.indexOf(“.”);

p_ret = p_ret.substring(0, len);

}

return p_ret;

} catch (p_ee) {

return “”;

}

};

23.把金额数字转换为中文大写金额

function (n) {

var fraction = [‘角’, ‘分’];

var digit = [‘零’, ‘壹’, ‘贰’, ‘叁’, ‘肆’, ‘伍’, ‘陆’, ‘柒’, ‘捌’, ‘玖’];

var unit = [

[‘元’, ‘万’, ‘亿’],

[‘’, ‘拾’, ‘佰’, ‘仟’]

];

var head = n < 0 ? ‘欠’ : ‘’;

n = Math.abs(n);

var s = ‘’;

for (let i = 0; i < fraction.length; i++) {

s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ‘’);

}

s = s || ‘整’;

n = Math.floor(n);

for (let i = 0; i < unit[0].length && n > 0; i++) {

var p = ‘’;

for (var j = 0; j < unit[1].length && n > 0; j++) {

p = digit[n % 10] + unit[1][j] + p;

n = Math.floor(n / 10);

}

s = p.replace(/(零.)*零 $KaTeX parse error: Expected group after '^' at position 17: \dots, '').replace(/^̲$ /, ‘零’) + unit[0][i] + s;

}

return head + s.replace(/(零.)*零元/, ‘元’).replace(/(零.)+/g, ‘零’).replace(/^整$/, ‘零元整’);

};

24.生成验证码(len 验证码长度（默认：6）,{String} 生成的验证码,)

function (len) {

var charactors = “1234567890”;

var value = ‘’;

if (!this.isint(len)) {

len = 6;

}

for (let j = 1; j <= len; j++) {

var i = parseInt(10 * Math.random());

value = value + charactors.charAt(i);

}

return value;

};

25.格式化账号显示(4位加空格)

function (account) {

if (!this.isvalue(account)) {

return “”;

}

if(account.startsWith(“1”)){

if(account.length >= 17){

account=account.substring(0,6)+“******”+account.substring(account.length-5);

}

if(account.startsWith(“6”)){

if(account.length >= 16){

account=account.substring(0,4)+" **** **** "+account.substring(account.length-4);

}

return account;

};

26.格式化户名显示，2字屏蔽第1位，用号代替，3字屏蔽第2位，用号代替，3字以上，显示第1位和最后1位，其余用号代替，最多使用5位。

function (name) {

if (!this.isvalue(name)) {

return “”;

}

var res = “”;

if (name.length == 1) {

res += name;

}

if (name.length == 2) {

res += “*”;

res += name.substring(name.length - 1);

}

if (name.length == 3) {

res += name.substring(0, 1);

res += “*”;

res += name.substring(2);

}

if (name.length > 3) {

res += name.substring(0, 1);

for(let i=0; i<name.length - 2; i++) {

if(i <= 4) {

res += “*”;

} else {

break;

}

res += name.substring(name.length - 1, name.length);

}

return res;

};

27.字符串替换

function (sourceString, startPos, encryptCount, encryptChar) {

if (typeof sourceString != ‘string’)

return sourceString;

if (sourceString.length <= 0)

return sourceString;

if (typeof startPos != ‘number’)

return sourceString;

if (startPos <= 0)

return sourceString;

if (typeof encryptCount != ‘number’)

return sourceString;

if (encryptCount <= 0)

return sourceString;

if (startPos > sourceString.length)

return sourceString;

if ((startPos + encryptCount) > sourceString.length + 1)

return sourceString;

var str1 = sourceString.substr(0, startPos - 1);

var str2 = sourceString.substr(startPos - 1, sourceString.length - startPos + 1);

var str3 = ‘’;

var str4 = str2.substr(encryptCount, str2.length - encryptCount);

for (var i = 0; i < encryptCount; i++) {

str3 = str3 + encryptChar;

}

return str1 + str3 + str4;

};

28.生成UUID（len UUID长度，默认标准36位，radix UUID基数，默认16）

function (len, radix) {

var chars = ‘0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz’.split(‘’);

var uuid = [],

radix = radix || chars.length;

if (len) {

// Compact form

for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];

} else {

// rfc4122, version 4 form

var r;

// rfc4122 requires these characters

uuid[8] = uuid[13] = uuid[18] = uuid[23] = ‘-’;

uuid[14] = ‘4’;

// Fill in random data. At i==19 set the high bits of clock sequence as

// per rfc4122, sec. 4.1.5

for (i = 0; i < 36; i++) {

if (!uuid[i]) {

r = 0 | Math.random() * 16;

uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];

}

return uuid.join(‘’);

};

29.随机数生成36位UUID

function () {

var s4 = function () {

return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);

}

return s4() + s4() + ‘-’ + s4() + ‘-’ + s4() + ‘-’ + s4() + ‘-’ + s4() + s4() + s4();

};

30.解析json，结果返回

function (str) {

if (typeof str == ‘string’) {

try {

var obj = JSON.parse(str);

if (typeof obj == ‘object’ && obj) {

return obj;

} else {

return false;

}

} catch (e) {

return false;

}

} else if (typeof str == ‘object’) {

console.log(‘It is a object already!’);

return str;

}

console.log(‘It is not a string!’)

};

31.金额数据分转元

function (money) {

if (typeof money == ‘string’) {

money = money.split(“.”).join(“”);//去调小数点

var money2 = parseInt(money);

money2 = money2.toString();

if (money2.length > 2) {

money2 = money2.substring(0, money2.length - 2) + “.” + money2.substring(money2.length - 2, money2.length);

} else if (money2 == 0) {

money2 = “0.00”;

} else if (money2.length == 2) {

money2 = “0.” + money2;

} else if (money2.length == 1) {

money2 = “0.0” + money2;

}

return money2;

}

console.log(‘It is not a string!’)

};

32.金额数据元转分

function (money) {

if (typeof money == ‘string’) {

var money2 = money.replaceAll(“,”, “”);

if (money2.indexOf(“.”) < 0) {

money2 = money2 + “00”

} else if (money2.length - money2.indexOf(“.”) == 2) {//一位小数

money2 = money2.replace(“.”, “”) + ‘0’;

} else {//两位小数

money2 = money2.replace(“.”, “”);

}

return money2;

}

console.log(‘It is not a string!’)

};

33.两个浮点型相减，不丢失精度

function (arg1, arg2) {

var r1, r2, m, n;

try {

r1 = arg1.toString().split(“.”)[1].length

} catch (error) {

r1 = 0

}

try {

r2 = arg2.toString().split(“.”)[1].length

} catch (error) {

r2 = 0

}

m = Math.pow(10, Math.max(r1, r2));

n = (r1 >= r2) ? r1 : r2;

return ((arg1 * m - arg2 * m) / m).toFixed(n);

};

34. 两个浮点型相加，不丢失精度

function (arg1, arg2) {

var r1, r2, m, n;

try {

r1 = arg1.toString().split(“.”)[1].length

} catch (error) {

r1 = 0

}

try {

r2 = arg2.toString().split(“.”)[1].length

} catch (error) {

r2 = 0

}

m = Math.pow(10, Math.max(r1, r2));

n = (r1 >= r2) ? r1 : r2;

return ((arg1 * m + arg2 * m) / m).toFixed(n);

};

35.按长度数组截取字符串，返回按长度分割成的字符串数组

function (str, lens) {

var arr = [];

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5