JS基础篇--通过JS生成由字母与数字组合的随机字符串

zhangrxiang 发布于2019-08-21 18:29 / 1779人阅读

摘要：若是偶数，返回的数值字符串都是短的，若是奇数，则返回的将是一个很大长度的表示值。若则都是数字组成，才会包含字母。

在项目中可能需要随机生成字母数字组成的字符，如生成3-32位长度的字母数字组合的随机字符串（位数不固定）或者生成43位随机字符串（位数固定）

使用Math.random()与toString()方法的结合

先看一下这个方式：

Math.random().toString(36);

结果：0.9kfiead48n
toString后的参数规定可以是2-36之间的任意整数，不写的话默认是10（也就是十进制），此时返回的值就是那个随机数。

若是偶数，返回的数值字符串都是短的，若是奇数，则返回的将是一个很大长度的表示值。

若<10 则都是数字组成，>10 才会包含字母。

所以如果想得到一长串的随机字符，则需使用一个 > 10 且是奇数的参数。但是由于返回的是小数点，所以需要截取，可以使用slice(2) 。这儿使用substr()方法。如下：

Math.random().toString(36).substr(2);

结果：p3bz2xrzsam

但是上面的方式只是随机了，位数不确定。怎样来控制在一个范围或者固定的位数呢？看下面的方法。

常规的函数写法

/** 随机生成固定位数或者一定范围内的字符串数字组合
 * @param {Number} min 范围最小值
 * @param {Number} max 范围最大值，当不传递时表示生成指定位数的组合
 * @returns {String} 返回字符串结果
 * */
function randomRange(min, max){
    var returnStr = "",
        range = (max ? Math.round(Math.random() * (max-min)) + min : min),
        arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
 
    for(var i=0; i
结果：
VkdWQnIOKntsp
UoUUNtGJrHVl7UMc9jlvYjUr
1F1ck8I7yV
SEPGPzuO5F
函数写法优化
想想上面的arr这样写太繁琐，也可以写成字符串的形式,实现方式也差不多只是稍微变一下：
function randomRange(min, max){
    var returnStr = "",
        range = (max ? Math.round(Math.random() * (max-min)) + min : min),
        charStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
    for(var i=0; i
结果：
Jpjtfe4S7aOSUAiGuYwK
n1mR5bDNf4jRBfM
j6HaBH7fZl
KbbHNw8V4Y
扩展：从指定的字符串生成组合
/** 随机生成固定位数或者一定范围内的字符串数字组合
 * @param {Number} min 范围最小值
 * @param {Number} max 范围最大值，当不传递时表示生成指定位数的组合
 * @param {String} charStr指定的字符串中生成组合
 * @returns {String} 返回字符串结果
 * */
function randomRange(min, max, charStr){
    var returnStr = "",
        range;
     if(typeof max == "string"){
         charStr = max;
     }
     range = ((max && typeof max == "number") ? Math.round(Math.random() * (max-min)) + min : min);
     charStr = charStr || "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";    
    for(var i=0; i
结果：
La2vVO4jrXZlHVLBs8b5K
1bc0cd1
ae888oluQX
32232
进一步优化，不传递参数，默认生成指定位数的字符串组合
/** 随机生成固定位数或者一定范围内的字符串数字组合
 * @param {Number} min 范围最小值
 * @param {Number} max 范围最大值，当不传递时表示生成指定位数的组合
 * @param {String} charStr指定的字符串中生成组合
 * @returns {String} 返回字符串结果
 * */
function randomRange(min, max, charStr){
    var returnStr = "",
        range;
    if(typeof min == "undefined"){
        min = 10;
    }
     if(typeof max == "string"){
         charStr = max;
     }
     range = ((max && typeof max == "number") ? Math.round(Math.random() * (max-min)) + min : min);
     charStr = charStr || "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";    
    for(var i=0; i
结果：
ohcjkCLtuL
在优化，根据ASCII码生成组合
通过打印：
console.log("9".charCodeAt(0)); //0-9ASCII范围：48-57
console.log("a".charCodeAt(0));// a-zASCII范围：97-122
console.log("A".charCodeAt(0));// A-ZASCII范围：65-90
常见字符对应的ASCII码

a-z 97-122
A-Z 65-90
0-9 45-57

其实知道了这个我们就不需要写那么长的charStr字符串
/** 随机生成固定位数或者一定范围内的字符串数字组合
 * @param {Number} min 范围最小值
 * @param {Number} max 范围最大值，当不传递时表示生成指定位数的组合
 * @param {String} charStr指定的字符串中生成组合
 * @returns {String} 返回字符串结果
 * */
function randomRange(min, max, charStr){
    var returnStr = "", //返回的字符串
        range; //生成的字符串长度
        
    //随机生成字符
    var autoGetStr = function(){
        var charFun = function(){
            var n= Math.floor(Math.random()*62);
            if(n<10){
                return n; //1-10
            }
            else if(n<36){
                return String.fromCharCode(n+55); //A-Z
            }
            else{
                return String.fromCharCode(n+61); //a-z    
            }
        }
        while(returnStr.length< range){
            returnStr += charFun();
        }
    };
    
    //根据指定的字符串中生成组合
    var accordCharStrGet = function(){
        for(var i=0; i
结果：
S0yIEsPj4Q
dff0d
Zx93g07ewD
22232
参考地址
https://www.cnblogs.com/makan/p/4850071.html

专线服务服务器托管 js生成随机5字符串 js只能输入字母数字 js数字字母验证码 js背景色随机生成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90508.html

如何编写简单的parser（基础篇）

摘要：在这里，词法解析器应用的规则即为词汇语法的定义，语法解释器应用的规则即为表达式语句声明和函数等的定义。如何编写简单的实践篇什么是parser？简单的说，parser的工作即是将代码片段转换成计算机可读的数据结构的过程。这个计算机可读的数据结构更专业的说法是抽象语法树（abstract syntax tree），简称AST。AST是代码片段具体语义的抽象表达，它不包含该段代码的所有细...

Barry_Ng 2019-08-23 14:53 评论0 收藏0
【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集（持续更新中）

摘要：在数组中循环使用将数组的第一个元素除去直到函数的返回值为。使用匿名内部函数范围来声明未定义的内存空间使用闭包来存储返回值。返回顶部从数组中移除给定函数返回的元素使用查找返回值的数组元素和以使用删除元素。使用执行从右向左的函数组合。 showImg(https://segmentfault.com/img/bV0PXR?w=400&h=80); Util.js （持续更新中...） ...

ivyzhang 2019-08-21 18:20 评论0 收藏0
正则表达式-理论基础篇

摘要：正则表达式理论基础篇搬运自个人博客原址正则表达式理论基础篇什么是正则表达式可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。正则表达式-理论基础篇搬运自个人博客,原址正则表达式-理论基础篇什么是正则表达式?可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。强大的字符串匹配工具如何建立一个正则表达式...

wanglu1209 2019-08-21 10:46 评论0 收藏0
正则表达式-理论基础篇

摘要：正则表达式理论基础篇搬运自个人博客原址正则表达式理论基础篇什么是正则表达式可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。正则表达式-理论基础篇搬运自个人博客,原址正则表达式-理论基础篇什么是正则表达式?可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。强大的字符串匹配工具如何建立一个正则表达式...

K_B_Z 2019-08-02 18:20 评论0 收藏0
正则表达式-理论基础篇

摘要：正则表达式理论基础篇搬运自个人博客原址正则表达式理论基础篇什么是正则表达式可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。正则表达式-理论基础篇搬运自个人博客,原址正则表达式-理论基础篇什么是正则表达式?可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。强大的字符串匹配工具如何建立一个正则表达式...

vpants 2019-08-01 14:52 评论0 收藏0