【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）

19 阅读 0 评论 0 点赞

前言

在现代前端开发中，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 "&nbsp;"; // space
            case 34: return "&quot;"; // "
            case 38: return "&amp;"; // &
            case 39: return "&#x27;"; // '
            case 60: return "&lt;"; // <
            case 62: return "&gt;"; // >
            default:
                if(thechar > 127) {
                    return "&#x" + thechar.toString(16) + ";";
                }
                else{
                    return original;
                }
        }
    }
}

let str = '朱昆鹏<div>2707509@.qq.com</div>朱昆鹏';
console.log(HtmlEncode(str)); 
// 输出：朱昆鹏&lt;div&gt;2707509@.qq.com&lt;/div&gt;朱昆鹏

结尾

以上内容涵盖了常用的 JavaScript 方法与技巧，希望对大家在日常开发中有所帮助。掌握这些方法不仅能提高开发效率，还能帮助您更好地解决实际问题。

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » 【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）

点赞(0) 打赏

本文分类：文章资讯
本文标签：【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）
浏览次数：19 次浏览
本文链接：https://freeymw.com/article/35936.html

评论列表共有 0 条评论

暂无评论

【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）

前言

JavaScript 方法速查

1. 数学函数的实用示例

2. 常用正则表达式速查

消除字符串首尾空格

替换手机号码

替换敏感字

千位分隔符

验证手机号码

3. 变量交换

4. 格式化对象为 JSON 代码

5. 随机生成六位数字验证码

6. RGB 颜色转 16 进制颜色

7. 生成随机整数

8. 去除空格

9. 大小写转换

10. 随机生成 16 进制颜色

11. 统计一段文字中指定文字出现次数

12. 轮询等待函数

13. 大数值转换为万，亿

14. 常见的 XSS 转义场景

转义 HTML 特殊字符

更多文章

结尾

评论列表共有 0 条评论

发表评论取消回复

【前端】JavaScript 方法速查大全-函数、正则、格式化、转换、进制、 XSS 转义（四）

前言

JavaScript 方法速查

1. 数学函数的实用示例

2. 常用正则表达式速查

消除字符串首尾空格

替换手机号码

替换敏感字

千位分隔符

验证手机号码

3. 变量交换

4. 格式化对象为 JSON 代码

5. 随机生成六位数字验证码

6. RGB 颜色转 16 进制颜色

7. 生成随机整数

8. 去除空格

9. 大小写转换

10. 随机生成 16 进制颜色

11. 统计一段文字中指定文字出现次数

12. 轮询等待函数

13. 大数值转换为万，亿

14. 常见的 XSS 转义场景

转义 HTML 特殊字符

更多文章

结尾

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复