JavaScript中產生隨機數字和字串-js教程-PHP中文網

JavaScript中產生隨機數字和字串

產生隨機數或字母數字字串的能力在許多情況下都會派上用場。您可以使用它在遊戲中的不同位置生成敵人或食物。您也可以使用它向用戶建議隨機密碼或建立文件名來保存文件。

我寫了一篇關於如何在 PHP 中產生隨機字母數字字串的教學。我在這篇文章的開頭說，幾乎沒有事件是真正隨機的，同樣的情況也適用於隨機數或字串生成。

在本教程中，我將向您展示如何在 JavaScript 中產生偽隨機字母數字字串。

在 JavaScript 中產生隨機數字

讓我們從產生隨機數字開始。我想到的第一個方法是 Math.random()，它傳回一個浮點偽隨機數。隨機數將始終大於或等於 0 且小於 1。

該範圍內傳回的數字的分佈幾乎是均勻的，因此該方法可以很好地產生隨機數，而在日常使用中不會出現明顯的偏差。以下是對 Math.random() 方法十次呼叫的輸出：

for(let i = 0; i < 10; i++) {
  console.log(Math.random());
}

/* Outputs:
0.9981169188071801
0.7073616929117277
0.05826679080842556
0.30779242012809105
0.37282814053539926
0.8991639574910759
0.5851162879630685
0.40572834956467063
0.5286480734412005
0.07898699710613699
*/

登入後複製

產生範圍內的隨機整數

如您在上一節中所看到的，Math.random() 將為我們提供 0（含）到 1（不含）範圍內的隨機數。假設我們想要 0（含）到 100（不含）範圍內的隨機整數。我們在這裡需要做的就是將原始範圍乘以 100。

以上面程式碼片段的第一個輸出值為例，0.9981169188071801乘以100後將變成99.81169188071801。現在，我們可以使用Math.floor()方法，該方法將向下舍入並傳回最大的值小於或等於 99.81169188071801 的整數。換句話說，它會給我們 99。

以下程式碼片段將循環執行 10 次，以顯示應用於不同數字的所有這些步驟。

const max_limit = 100;

for(let i = 0; i < 10; i++) {
  let random_float = Math.random();
  let scaled_float = random_float * max_limit;
  let random_integer = Math.floor(scaled_float);
  
  let rf_str = random_float.toString().padEnd(20, ' ');
  let sf_str = scaled_float.toString().padEnd(20, ' ');
  let ri_str = random_integer.toString().padStart(2, ' ');
  
  console.log(`Random Float: ${rf_str} Scaled Float: ${sf_str} Random Integer: ${ri_str}`);
}

/* Outputs:
Random Float: 0.7976037763162469   Scaled Float: 79.76037763162469    Random Integer: 79
Random Float: 0.3794078358214559   Scaled Float: 37.94078358214558    Random Integer: 37
Random Float: 0.5749118617425708   Scaled Float: 57.49118617425708    Random Integer: 57
Random Float: 0.7110572178100005   Scaled Float: 71.10572178100006    Random Integer: 71
Random Float: 0.9157559644743132   Scaled Float: 91.57559644743132    Random Integer: 91
Random Float: 0.8773095295734263   Scaled Float: 87.73095295734264    Random Integer: 87
Random Float: 0.7714603913623834   Scaled Float: 77.14603913623834    Random Integer: 77
Random Float: 0.6431998616346499   Scaled Float: 64.31998616346499    Random Integer: 64
Random Float: 0.7909155691442253   Scaled Float: 79.09155691442254    Random Integer: 79
Random Float: 0.1219575935563590   Scaled Float: 12.19575935563590    Random Integer: 12
*/

登入後複製

現在您已經了解了乘法和取整背後的邏輯，我們可以寫一個函數來產生最大限制內的隨機整數。

function max_random_number(max) {
  return Math.floor(Math.random() * max);
}

for(let i = 0; i < 10; i++) {
  console.log(max_random_number(100));
}

/* Outputs:
35
23
92
94
42
9
12
56
40
21
*/

登入後複製

如果您想產生高於指定最小值但低於最大值的隨機數該怎麼辦？

在這種情況下，您可以預先添加最小值，以確保產生的數字至少等於最小值。之後，您可以簡單地產生一個隨機數，然後按 max - min 對其進行縮放，然後將其新增至最小可能值。

function min_max_random_number(min, max) {
  return min + Math.floor(Math.random() * (max - min));
}

for(let i = 0; i < 10; i++) {
  console.log(min_max_random_number(50, 100));
}

/* Outputs:
96
81
95
56
73
72
71
90
51
53
*/

登入後複製

產生加密安全隨機數字

Math.random() 方法不適合產生加密安全的隨機數，但 Crypto.getRandomValues() 方法可以在這裡幫助我們。此方法以加密安全的偽隨機數填滿傳遞的陣列。請記住，用於產生這些隨機數的演算法可能因用戶代理而異。

正如我之前提到的，您需要將基於整數的 TypedArray 傳遞給該方法，以便它可以用隨機值填充它。數組的原始內容將被替換。以下程式碼將以隨機整數填滿我們的十元素陣列。

let random_values = new Uint8Array(10);
console.log(random_values);
// Outputs: Uint8Array(10) [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

crypto.getRandomValues(random_values);
console.log(random_values);
// Outputs: Uint8Array(10) [ 207, 209, 1, 145, 70, 111, 21, 141, 54, 200 ]

登入後複製

Unit8Array() 建構子為我們提供了一個由 10 個 8 位元無符號整數組成的陣列。數組值全部初始化為零。

一旦我們將此陣列傳遞給 getRandomValues() 方法，隨機數的值將保持在 0 到 255 之間。您可以使用其他類型陣列來產生不同範圍的隨機數。例如，使用 Int8Array() 建構函數將為我們提供一個整數值在 -128 到 127 之間的陣列。同樣，使用 Uint16Array() 將為我們提供一個整數值最大為 65,535 的陣列。

let random_values = new Int8Array(10);
console.log(random_values);
// Outputs: Int8Array(10) [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

crypto.getRandomValues(random_values);
console.log(random_values);
// Outputs: Int8Array(10) [ -82, -106, 87, 64, 42, -36, -53, 27, -38, 4 ]


let random_values = new Uint16Array(10);
console.log(random_values);
// Outputs: Uint16Array(10) [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

crypto.getRandomValues(random_values);
console.log(random_values);
// Outputs: Uint16Array(10) [ 47615, 60195, 53177, 15169, 215, 4928, 12200, 6307, 30320, 20271 ]

登入後複製

在 JavaScript 中產生隨機字母數字字串

我們現在將使用上一節中獲得的知識在 JavaScript 中產生隨機字母數字字串。

這個概念非常簡單。我們將從包含所有所需字元的字串開始。在本例中，字串將由小寫字母、大寫字母和 0 到 9 的數字組成。您可能已經知道，我們可以透過向字串傳遞索引值來存取字串中特定位置的字元。

要產生隨機字母數字字串，我們所需要做的就是產生隨機數，然後存取該隨機索引處的字元以將其附加到我們的隨機字串中。以下程式碼片段將其全部包裝在一個漂亮的小函數中：

const char_set = 'abcdefghijlkmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

function max_random_number(max) {
  return Math.floor(Math.random() * max);
}

function get_random_string(length) {
  let random_string = '';

  for(let i = 0; i < length; i++) {
    random_string += char_set[max_random_number(char_set.length - 1)];
  }
  
  return random_string;
}

console.log(get_random_string(20));
// Outputs: lgtuRJZolu7AXj4HMoiM

console.log(get_random_string(40));
// outputs: scOoal3VXgeAjaHIieolhi2TyWFpAn5bBPPiX6UG

登入後複製

使用 `toString()` 生成随机字母数字字符串

我们可以用来生成随机字母数字字符串的另一种方法是对随机生成的数字使用 toString() 方法。 toString() 方法返回一个表示我们指定数值的字符串。此方法接受可选的 radix 参数，该参数指定要表示数字的基数。值为 2 将返回二进制字符串，值为 16 将返回十六进制字符串。该参数默认值为10。最大值可以为36，因为它涵盖了全部26个字母和10个数字。

以下是针对不同 radix 值对此方法进行几次调用的输出：

let number = 3498650143868;

console.log(number.toString(2));
// Outputs: 110010111010010111110011001000110001111100

console.log(number.toString(10));
// Outputs: 3498650143868

console.log(number.toString(16));
// Outputs: 32e97cc8c7c

console.log(number.toString(36));
// Outputs: 18n99yoak

登入後複製

您可能已经注意到，随着我们增加 radix，输出字符串的长度不断减少。在下面的代码片段中，我们将使用上一节中的 max_random_number() 函数来获取随机数。然后，我们将使用 toString() 方法将此随机数转换为字母数字字符串。

function max_random_number(max) {
  return Math.floor(Math.random() * max);
}

for(let i = 0; i < 10; i++) {
  console.log(max_random_number(Number.MAX_SAFE_INTEGER).toString(36));
}
/* Outputs:
1tr84s6c2sl
1yj4varyoj7
1zdg9nn0z6r
lubrjj1zih
13tt2n5vw9t
1mv6sctjgf
yx3fhnznhf
1wj4mdcrqb9
26sir75af2r
qdv9xv800t
*/

登入後複製

如果您想要更大的字母数字字符串并希望它们具有固定长度（例如 40 个字符或 100 个字符）怎么办？在这种情况下，我们可以创建一个循环，不断附加生成的字符串，直到达到所需的长度。

function max_random_number(max) {
  return Math.floor(Math.random() * max);
}

function get_random_string(length) {
  let random_string = '';
  while(random_string.length < length) {
   random_string += max_random_number(Number.MAX_SAFE_INTEGER).toString(36);
  }
  return random_string.substring(0, length);
}

console.log(get_random_string(40));
// Outputs: bn0nfhcsjm18ylzqrm6bo1iktka2aq7qbbl5ybki

console.log(get_random_string(100));
// Outputs: rdosjhthsevmk91mj9zvqexz2z0v3pe2beasbzoworanzjg3bfpf975rzfy2fmo6pmj4p69u0x80ce92jh2vljx90g6r0lzd8vb0

登入後複製

最终想法

在本教程中，我们学习了如何在 JavaScript 中生成随机数和字母数字字符串。借助 Math.random() 方法，在 JavaScript 中生成随机整数很容易。我们所要做的就是缩放输出，使其符合我们所需的范围。如果您希望随机数具有加密安全性，您还可以考虑使用 getRandomValues() 方法。

一旦我们知道如何生成随机数，创建随机字母数字字符串就很容易了。我们需要做的就是弄清楚如何将数字转换为字符。我们在这里使用了两种方法。第一个涉及访问预定义字符串中随机数字索引处的字符。如果您想具体了解随机字母数字字符串中应包含的字符，则此技术非常有用。另一种方法涉及使用 toString() 方法将十进制数转换为不同的基数。这减少了对 max_random_number() 函数的调用。

当然还有更多技术可用于生成随机字母数字字符串。这完全取决于您的需求以及您想要的方法的创意程度。

以上是JavaScript中產生隨機數字和字串的詳細內容。更多資訊請關注PHP中文網其他相關文章！