一些 Javascript 的使用小技巧

这篇文章记录了一些我最近使用的小技巧，包括“生成随机不重复的ID”、“提取并替换一段文字中的某些值”、“字符串与XML的转换”和“快速取整数”，虽然这些都是基础技术，但在某些特定时刻还是非常有用的，所以用文章记录下来。

生成随机不重复的ID

有时候在没有数据库辅助的情况下，我们希望生成一个随机且不重复的ID。这时，我会使用“随机数”结合“时间戳”的方法。首先使用Math.random()生成一个0到1之间的大约16到17位的随机浮点数，然后通过toString(36)的方法缩短其位数，并转换为36进制（0到9、a到z）。如果觉得太长，还可以使用substr来截取自己想要的部分。

Math.random().toString(36).substr(2, n); // 移除开头的0和小数点，n自定义

第二步是使用Date.now()获取当前的毫秒数，总共有13位数字，同样通过toString(36)的方法缩短位数，并转换为36进制，然后也可以用substr截取自己想要的部分。

Date.now().toString(36).substr(4, n); // n自定义

將隨機數的片段和時間戳的片段組合，就能產生一個隨機不重複的 id 。(應該說重複機率低到不可能重複)

Math.random().toString(36).substr(2,n) +  Date.now().toString(36).substr(4,n);

提取并替换一段文字中的某些值

在开发过程中，我们有时会需要从一段文字中提取出某些值。如果只是简单地想要“替换成别的值”，使用replace()方法就能轻松实现。但是，使用相同的方法，也可以将这些值提取出来形成一个数组，以便通过程序控制要显示的内容。以下面这段文字为例，其中包含了几个用{{}}包裹的值，这些值可以通过编程方式控制其显示内容。

大家好，我叫做 {{name}}，今年{{age}} 岁，我是{{sex}}，很高兴来到这里

如果想要将所有{{}}内的文本替换成对应对象的值，可以通过以下方式处理，其中比较重要的是replace()方法中的正则表达式/{{(.*?)}}/g，它可以匹配两个大括号内的文本。

const text = '大家好，我叫做{{name}}，今年{{age}}岁，我是{{sex}}，很高兴来到这里';
const obj = {
  name: 'bug',
  age: 18,
  sex: '男生'
};
const result = text.replace(/{{(.*?)}}/g, e => {
  return obj[e.replace(/{|}/g,'')];
});

得到的结果是：“大家好，我叫做 bug，今年 18 岁，我是男生，很高兴来到这里”。

字符串与XML的转换

在JavaScript中，如果直接读取XML，得到的将是一些节点构成的对象。因此，如果要使用像replace()等字符串操作，就必须先将其转换为字符串String。下面的公式可以很简单地将XML转换为字符串String，处理之后再转回XML。

XML转字符串String

xmlToString = (new XMLSerializer()).serializeToString(xmlObject);

字符串String转XML

stringToXML = (new DOMParser()).parseFromString(xmlString, "text/xml");

快速取整数

在JavaScript中取整数，最常见的无非是Math.round()四舍五入、Math.floor()无条件舍去和Math.ceil()无条件进位三种。不过，通过两个“按位非运算符”（两个波浪号），也可以实现无条件舍去小数点的效果，这也是最快的取整数方法。下面的代码会先获取一个0到100之间的随机数，然后取出整数部分。

const num = Math.random() * 100;
console.log(num);   // 显示原本得到的随机数
console.log(~~num); // 取得整数部分

原文始发于微信公众号（程序猿技术充电站）：一些 Javascript 的使用小技巧

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/289523.html