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文字滚动停顿效果代码
Jun 28 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jQuery 选择器详解
Jan 19 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
JS module的导出和导入的实现代码
Feb 25 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无限分类的类
2007/01/02 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JS中style属性
2006/10/11 Javascript
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Python执行时间的计算方法小结
2017/03/17 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
python3注册全局热键的实现
2020/03/22 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
中学教师岗位职责
2013/11/26 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
工作时间证明
2015/06/15 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS