JS实现生成由字母与数字组合的随机字符串功能详解


Posted in Javascript onMay 25, 2018

本文实例讲述了JS实现生成由字母与数字组合的随机字符串功能。分享给大家供大家参考,具体如下:

在项目中可能需要随机生成字母数字组成的字符,如生成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<range; i++){
  var index = Math.round(Math.random() * (arr.length-1));
  returnStr += arr[index];
 }
 return returnStr;
}
var rand01 = randomRange(10,22);
var rand02 = randomRange(10,36);
var rand03 = randomRange(10);
var rand04 = randomRange(10);

结果:

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<range; i++){
  var index = Math.round(Math.random() * (charStr.length-1));
  returnStr += charStr.substring(index,index+1);
 }
 return returnStr;
}
var rand01 = randomRange(10,22);
var rand02 = randomRange(10,36);
var rand03 = randomRange(10);
var rand04 = randomRange(10);

结果:

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<range; i++){
  var index = Math.round(Math.random() * (charStr.length-1));
  returnStr += charStr.substring(index,index+1);
 }
 return returnStr;
}
var rand01 = randomRange(10,22);
var rand02 = randomRange(5,8,'abcdef012');
var rand03 = randomRange(10);
var rand04 = randomRange(5,'123');

结果:

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<range; i++){
  var index = Math.round(Math.random() * (charStr.length-1));
  returnStr += charStr.substring(index,index+1);
 }
 return returnStr;
}
var rand01 = randomRange();

结果:

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<range; i++){
   var index = Math.round(Math.random() * (charStr.length-1));
   returnStr += charStr.substring(index,index+1);
  }
 };
 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);
  if(charStr){
   accordCharStrGet();
  }else{
   autoGetStr();
  }
 return returnStr;
}
var rand01 = randomRange();
var rand02 = randomRange(5,8,'abcdef012');
var rand03 = randomRange(10);
var rand04 = randomRange(5,'123');

结果:

S0yIEsPj4Q
dff0d
Zx93g07ewD
22232

参考文章

Javascript 相关文章推荐
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 #Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 #Javascript
Webpack中雪碧图插件使用详解
May 25 #Javascript
使用javascript做在线算法编程
May 25 #Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 #Javascript
浅析node.js的模块加载机制
May 25 #Javascript
webpack4的迁移的使用方法
May 25 #Javascript
You might like
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
js实现简单进度条效果
2020/03/25 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
遗产继承公证书
2014/04/09 职场文书
工程承包协议书
2014/04/22 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis