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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
js实现图片360度旋转
Jan 22 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
谈谈JS中的!!
Dec 07 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP 强制下载文件代码
2010/10/24 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python输出指定月份日历的方法
2015/04/23 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python爬虫与反爬虫大战
2020/07/30 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
2014年基层党组织公开承诺书
2014/03/29 职场文书
设计顾问服务计划书
2014/05/04 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
委托函范文
2015/01/29 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2015中学学校工作总结
2015/07/20 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
详解Laravel服务容器的优势
2021/05/29 PHP
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS