JS通过ASCII码值实现随机字符串的生成（可指定长度以及解决首位不出现数值）

在之前写过一篇"JS实现随机生成字符串（可指定长度）"，当时写的过于简单和传统，比较粗放。此次针对此问题，对随机生成字符串的功能进行优化处理，对随机取到的字符都通过程序自动来完成。

在写之前，我们先了解下String.charCodeAt、Array.from()、String.fromCharCode等方法，以及随机获取指定范围中的值，这些在此次功能优化中起到关键作用。

一、String.charCodeAt

获取指定下标的字符的ASCII码(Unicode)。

返回值：0~65535之间的整数

语法：

TypeScript 复制代码

string.charCodeAt(index)

参数：index：指定字符的下标

示例：

TypeScript 复制代码

console.log('a'.charCodeAt(0))
console.log('z'.charCodeAt(0))
console.log('A'.charCodeAt(0))
console.log('Z'.charCodeAt(0))

// 运行结果：
97
122
65
90

通过上述输出，得出结论是a~z的ASCII码为97~122，A~Z的ASCII码为65~90。

二、Array.from

Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

语法：

TypeScript 复制代码

Array.from(arrayLike[, mapFn[, thisArg]])

这里通过Array.from生成一个1~10的数值元素的数组。示例如下：

TypeScript 复制代码

console.log(Array.from({length: 10}, (_, index) => index + 1))

// 运行结果：
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

三、String.fromCharCode

该函数属于String对象，所有主流浏览器均支持该函数。

语法:

TypeScript 复制代码

String.fromCharCode( [code1 [, code2 [, codes... ]]] )

String.fromCharCode()函数属于静态函数，而且只能够通过全局String对象进行调用，不能通过String对象的实例进行调用。

接下来我们将通过String.fromCharCode，并结合Array.from方法，将97~122，65~90转换为字母。示例如下：

TypeScript 复制代码

// 生成小写字母的ASCII码
const codesLower = Array.from({length: 26}, (_, index) => 65 + index)
// 生成大写字母的ASCII码
const codesCapital = Array.from({length: 26}, (_, index) => 97 + index)
// 输出小写ASCII码
console.log(codesLower)
// 输出大写ASCC码
console.log(codesCapital)
// 转换为小写字母
console.log(String.fromCharCode(...codesLower))
// 转换为大写字母
console.log(String.fromCharCode(...codesCapital))


// 运行结果：
[
  65, 66, 67, 68, 69, 70, 71, 72,
  73, 74, 75, 76, 77, 78, 79, 80,
  81, 82, 83, 84, 85, 86, 87, 88,
  89, 90
]
[
   97,  98,  99, 100, 101, 102,
  103, 104, 105, 106, 107, 108,
  109, 110, 111, 112, 113, 114,
  115, 116, 117, 118, 119, 120,
  121, 122
]
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

如上所示，我们可以通过获取随机的ASCII码值，来生成随机字符串（包含字母+数值）。

四、随机获取指定范围的值

要想随机获取指定范围的值，我们需要先定义一个函数，用于随机获取0~9，65~90，97~122之间的值。示例代码如下：

TypeScript 复制代码

// 随机值
const randomCode = (min, max) => Math.floor(Math.random() * (max - min)) + min

console.log(randomCode(0, 10))


// 运行结果：
1

由于使用的是Math.floor为向下取值，所以0~10获取到的值范围为 0<= x < 10，所以最大值是10，而不是9。如果写0~9则无法取到9的值。

五、生成ASCII码序列值

我们先使用Array.from将0~9， 65~90， 97~122的ASCII码值生成出来。示例如下：

TypeScript 复制代码

// 生成序列值
const generatorSequence = (_len, _start) => Array.from({length: _len}, (_, index) => _start + index)
// 生成ASCII码
const ASCCodes= [
    ...generatorSequence(10, 0),
    ...generatorSequence(26, 65),
    ...generatorSequence(26, 97)
]

console.log(ASCCodes)


// 运行结果：
[
    0,   1,   2,   3,   4,   5,   6,   7,   8,   9,  65,  66,
   67,  68,  69,  70,  71,  72,  73,  74,  75,  76,  77,  78,
   79,  80,  81,  82,  83,  84,  85,  86,  87,  88,  89,  90,
   97,  98,  99, 100, 101, 102, 103, 104, 105, 106, 107, 108,
  109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120,
  121, 122
]

六、生成随机字符串

接下来通过随机取值函数randomIndex()方法，生成ASCCodes数组的索引值，取出对应索引的值。示例如下：

TypeScript 复制代码

// 生成序列值
const generatorSequence = (_len, _start) => Array.from({length: _len}, (_, index) => _start + index)
// 生成ASCII码
const ASCCodes = [
    ...generatorSequence(10, 0),
    ...generatorSequence(26, 65),
    ...generatorSequence(26, 97)
]
// 随机值
const randomIndex = (min, max) => Math.floor(Math.random() * (max - min)) + min
// 定义获取随机字符 函数
const getRandomStr = () => {
    const value = ASCCodes[randomIndex(0, ASCCodes.length)]
    return value > 9 ? String.fromCharCode(value) : value
}
// 定义 生成随机值 函数
const generatorRandomStr = (_len) => {
    return Array.from({length: _len}, (_, index) => {
        return getRandomStr()
    }).join('')
}
// console.log(ASCCodes)
console.log(generatorRandomStr(50))


// 运行结果：
9MBz2VGbpTFE4M3V8TeswAWdTEliwvgGhODQQFjaiLE2Hr0DGC

七、处理首位数值问题

如上述结果可见，字符串首位可能会出现数值情况。希望首位不会出现数值，在生成时可作简单调整即可。示例如下：

TypeScript 复制代码

// 生成序列值
const generatorSequence = (_len, _start) => Array.from({length: _len}, (_, index) => _start + index)
// 生成ASCII码
const ASCCodes = [
    ...generatorSequence(10, 0),
    ...generatorSequence(26, 65),
    ...generatorSequence(26, 97)
]
// 随机值
const randomIndex = (min, max) => Math.floor(Math.random() * (max - min)) + min
// 定义获取随机字符 函数
const getRandomStr = (index) => {
    const value = ASCCodes[randomIndex(0, ASCCodes.length)]
    // 如果为首位，并且取到的值小于等于9，则为数字，重新获取
    if (index === 0 && value <= 9) return getRandomStr(index)
    return value > 9 ? String.fromCharCode(value) : value
}
// 定义 随机生成字符串
const generatorRandomStr = (_len) => {
    return Array.from({length: _len}, (_, index) => {
        return getRandomStr(index)
    }).join('')
}
// console.log(ASCCodes)
console.log(generatorRandomStr(50))


// 运行结果：
BqpwIAvYHpKjvbfsgxfk4YVNzpkFRoK3CYOIWq2IGfDcjazuUF

此篇就先讲到这，希望对大家有所帮助~