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 相关文章推荐
JavaScript中URL编码函数代码
Jan 11 Javascript
js操作数组函数实例小结
Dec 10 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
JS的深浅复制详细
Oct 16 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
php生成随机密码的几种方法
2011/01/17 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python 迭代器工具包【推荐】
2016/05/06 Python
python 调用HBase的简单实例
2016/12/18 Python
Android分包MultiDex策略详解
2017/10/30 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python3 深浅copy对比详解
2019/08/12 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
歌唱比赛主持词
2014/03/18 职场文书
婚礼秀策划方案
2014/05/19 职场文书
组工干部演讲稿
2014/09/02 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB