在浏览器环境中生成随机字符串

在开发中，经常会需要使用到随机字符串，或者是 hash 字符串，在 node 环境中可以很方便的使用 crypto 模块，在前端环境中应该如何来使用呢？

1. 使用 Math.random

   Math.random() 返回值为 0-1之前的浮点数

   通过这个属性，我们可以生成伪随机数，然后将伪随机数转化为 16 进制的 hex字符串即可

   Math.random().toString(36).slice(2)
   

   生成的随机字符串

   h4pl2m80b2
   

   如果想要生成仅包含 16 进制字符的字符串，则可以将 toString 的参数更改为 16 即可
   附上 MDN中关于 Number.prototype.toString([radix]) 的解释

   radix：指定要用于数字到字符串的转换的基数(从2到36)。如果未指定 radix 参数，则默认值为 10。

   也就是说在 二进制到 36 进制之间可以进行转换；需要注意的由于使用的 Math.random 生成的随机数大小长度不可控，因此生成的随机字符串的长度也不可控。如果想要生成特定长度的字符串请使用 Crypto 对象，参见以下。

2. 使用 window.crypto
   在浏览器中原生支持了 Crypto 对象，不过此 crypto 不同于Node.js中的 crypto，使用 Crypto 对象，我们需要使用 getRandomValues() 方法，该方法接受 TypeArray 类型，通常来说使用 Uint8Array 即可，生成的字符串长度可以通过 TyprArray 的长度来控制，然后使用 Crypto.getRandomValues() 来填充随机数

   Array.prototype.map.call(window.crypto.getRandomValues(new Uint8Array(16)), (item) => item.toString(16)).join('')
   

   生成的随机字符串

   7f130fad88e443d12d9699573a3e12
   

更多内容

前端开发转全栈，目前的技术栈是 Node.js、Python，日常研究 C、C++ 和 Rust，孜孜啃食系统开发和网络设计中~

更多的内容请移步GitHub@ruxf，知乎@如小非，掘金@如小非，或者关注我的公众号@全栈开发师，欢迎来撩~

学到老，写到老，生命不停，编程不止~

加油，打工人~