【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）
🔥 前言
在现代前端开发中，JavaScript 是不可或缺的语言。无论是处理数据、操作 DOM，还是进行复杂的逻辑运算，掌握 JavaScript 的各种方法都是每位开发者的必修课。本文将为您提供一个全面、系统的 JavaScript 方法参考，涵盖数组操作、对象处理、正则表达式、数据格式转换等众多方面，助您在开发中游刃有余！💪
📚 JavaScript 方法速查
1. 数学函数的实用示例
JavaScript 提供了丰富的数学函数，以下是一些常用的示例：
console.log(parseInt(5.12)); // 5
console.log(Math.floor(5.12)); // 5
console.log(Math.ceil(5.12)); // 6
console.log(Math.round(5.499)); // 5
console.log(Math.round(5.501)); // 6
console.log(Math.abs(-5)); // 5
console.log(Math.max(5, 6)); // 6
console.log(Math.min(5, 6)); // 5
console.log(Math.random()); // 随机数 (0-1)
2. 常用正则表达式速查
正则表达式是处理字符串的强大工具，以下是一些常见的正则表达式示例：
消除字符串首尾空格
let reg = /^\s+|\s+$/g;
let str = ' #id div.class ';
console.log(str.replace(reg, '')); // "#id div.class"
替换手机号码
var reg = /1[24578]\d{9}/;
var str = '姓名：朱昆鹏 手机：15932638907';
console.log(str.replace(reg, '***')); // "姓名：朱昆鹏 手机：***"
替换敏感字
let str = '中国中国人民解放军中华人民共和国';
let r = str.replace(/中国|军/g, input => '*'.repeat(input.length));
console.log(r); // "****人民解放*中华人民共和国"
千位分隔符
let reg = /(\d)(?=(?:\d{3})+$)/g;
let numStr = '100002003232322';
let formatted = numStr.replace(reg, '$1,');
console.log(formatted); // "100,002,003,232,322"
验证手机号码
let reg = /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/;
console.log(reg.test('15932539095')); // true
console.log(reg.test('234554568997')); // false
3. 变量交换
在 JavaScript 中，变量交换可以通过解构赋值轻松实现：
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1
4. 格式化对象为 JSON 代码
使用 JSON.stringify 可以将对象格式化为 JSON 字符串：
const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);
console.log(formatted);
/*
{
"name": "Jhon",
"age": 18,
"address": "sz"
}
*/
5. 随机生成六位数字验证码
const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
console.log(code); // 例如 '042377'
6. RGB 颜色转 16 进制颜色
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
console.log(RGBToHex(255, 165, 1)); // 'ffa501'
7. 生成随机整数
function randomNum(min, max) {
switch (arguments.length) {
case 1:
return Math.floor(Math.random() * min + 1);
case 2:
return Math.floor(Math.random() * (max - min + 1) + min);
default:
return 0;
}
}
console.log(randomNum(1, 10)); // 随机 [1,10] 的整数
8. 去除空格
function trim(str, type = 1) {
if (![1, 2, 3, 4].includes(type)) return;
switch (type) {
case 1:
return str.replace(/\s/g, "");
case 2:
return str.replace(/(^\s)|(\s*$)/g, "");
case 3:
return str.replace(/(^\s)/g, "");
case 4:
return str.replace(/(\s$)/g, "");
default:
return str;
}
}
console.log(trim(' Hello World ', 2)); // "Hello World"
9. 大小写转换
function turnCase(str, type) {
switch (type) {
case 1:
return str.toUpperCase();
case 2:
return str.toLowerCase();
case 3:
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
default:
return str;
}
}
console.log(turnCase('hello World', 1)); // "HELLO WORLD"
10. 随机生成 16 进制颜色
function hexColor() {
let str = '#';
let arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
for (let i = 0; i < 6; i++) {
let index = Math.floor(Math.random() * 16);
str += arr[index];
}
return str;
}
console.log(hexColor()); // 例如 '#FFA501'
11. 统计一段文字中指定文字出现次数
function keywordsCount(text, keywords) {
return text.split(keywords).length - 1;
}
console.log(keywordsCount('hello world, hello JavaScript', 'hello')); // 2
12. 轮询等待函数
function pollingWaiting(callBack, resCallBack, time = 100, lastTime = 1000) {
let startTime = Date.now();
let t = null;
const fn = function () {
t = setTimeout(() => {
if (!callBack()) {
if (Date.now() - startTime > lastTime) {
clearTimeout(t);
} else {
fn();
}
} else {
resCallBack();
}
}, time);
};
fn();
}
// 示例
let a = 1;
setTimeout(() => {
a = 2;
}, 500);
pollingWaiting(
() => a === 2,
() => { console.log('触发了', a); },
100,
800
);
// 输出:
// "触发了 2"
13. 大数值转换为万，亿
function numConversion(num, point = 2) {
let numStr = Math.floor(num).toString();
let numLen = numStr.length;
if (numLen < 6) {
return numStr;
} else if (numLen >= 6 && numLen <= 8) {
let decimal = numStr.substring(numLen - 4, numLen - 4 + point);
let res = parseInt(num / 10000) + '.' + decimal + '万';
return res;
} else if (numLen > 8) {
let decimal = numStr.substring(numLen - 8, numLen - 8 + point);
let res = parseInt(num / 100000000) + '.' + decimal + '亿';
return res;
}
}
console.log(numConversion(123456789)); // "1.23亿"
14. 常见的 XSS 转义场景
转义 HTML 特殊字符
function HtmlEncode(str) {
var hex = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var preescape = str;
var escaped = "";
for(var i = 0; i < preescape.length; i++){
var p = preescape.charAt(i);
escaped += escapeCharx(p);
}
return escaped;
function escapeCharx(original){
var thechar = original.charCodeAt(0);
switch(thechar) {
case 10: return "<br/>"; // newline
case 32: return " "; // space
case 34: return """; // "
case 38: return "&"; // &
case 39: return "'"; // '
case 60: return "<"; // <
case 62: return ">"; // >
default:
if(thechar > 127) {
return "&#x" + thechar.toString(16) + ";";
}
else{
return original;
}
}
}
}
let str = '朱昆鹏<div>2707509@.qq.com</div>朱昆鹏';
console.log(HtmlEncode(str));
// 输出：朱昆鹏<div>2707509@.qq.com</div>朱昆鹏
🌲 更多文章
【VScode】中文版ChatGPT编程工具-CodeMoss！教程+示例+快捷键
【VScode】VSCode中的智能编程利器，全面揭秘ChatMoss & ChatGPT中文版
💡 结尾
以上内容涵盖了常用的 JavaScript 方法与技巧，希望对大家在日常开发中有所帮助。掌握这些方法不仅能提高开发效率，还能帮助您更好地解决实际问题。💻
原文地址：https://blog.csdn.net/zhouzongxin94/article/details/143506036
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！