Générer des nombres et des chaînes aléatoires en JavaScript

La possibilité de générer des nombres aléatoires ou des chaînes alphanumériques s'avère utile dans de nombreuses situations. Vous pouvez l'utiliser pour faire apparaître des ennemis ou de la nourriture à différents endroits du jeu. Vous pouvez également l'utiliser pour suggérer des mots de passe aléatoires aux utilisateurs ou créer des noms de fichiers pour enregistrer des fichiers.

J'ai écrit un tutoriel sur la façon de générer des chaînes alphanumériques aléatoires en PHP. J'ai dit au début de cet article que peu d'événements sont véritablement aléatoires, et il en va de même pour la génération de nombres aléatoires ou de chaînes.

Dans ce tutoriel, je vais vous montrer comment générer une chaîne alphanumérique pseudo-aléatoire en JavaScript.

Générer des nombres aléatoires en JavaScript

Commençons par générer des nombres aléatoires. La première méthode qui me vient à l’esprit est Math.random(), qui renvoie un nombre pseudo-aléatoire à virgule flottante. Le nombre aléatoire sera toujours supérieur ou égal à 0 et inférieur à 1.

La distribution des nombres renvoyés dans cette plage est presque uniforme, cette méthode peut donc bien générer des nombres aléatoires sans écarts évidents dans l'utilisation quotidienne. Voici le résultat de dix appels à la méthode 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
*/

Générer des entiers aléatoires dans une plage

Comme vous l'avez vu dans la section précédente, Math.random() nous donnera un nombre aléatoire compris entre 0 (inclus) et 1 (exclusif). Supposons que nous voulions un entier aléatoire compris entre 0 (inclus) et 100 (exclusif). Tout ce que nous devons faire ici est de multiplier la plage d'origine par 100.

En prenant comme exemple la première valeur de sortie de l'extrait de code ci-dessus, 0,9981169188071801 deviendra 99,81169188071801 une fois multiplié par 100. Maintenant, nous pouvons utiliser la méthode Math.floor(), qui arrondira à l’inférieur et renverra le plus grand entier dont la valeur est inférieure ou égale à 99,81169188071801. En d’autres termes, cela nous donnera 99.

L'extrait de code suivant bouclera 10 fois pour afficher toutes ces étapes appliquées à différents nombres.

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
*/

Maintenant que vous comprenez la logique derrière la multiplication et l'arrondi, nous pouvons écrire une fonction pour générer des entiers aléatoires dans la limite maximale.

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
*/

Et si vous souhaitez générer des nombres aléatoires supérieurs à un minimum spécifié mais inférieurs à un maximum ?

Dans ce cas, vous pouvez ajouter la valeur minimale au début pour vous assurer que le nombre obtenu est au moins égal à la valeur minimale. Après cela, vous pouvez simplement générer un nombre aléatoire et appuyer sur max - min pour le mettre à l'échelle et l'ajouter à la plus petite valeur possible.

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
*/

Générer des nombres aléatoires cryptographiquement sécurisés

Math.random() 方法不适合生成加密安全的随机数，但是 Crypto.getRandomValues() n'est pas adaptée pour générer des nombres aléatoires cryptographiquement sécurisés, mais la méthode Crypto.getRandomValues() peut nous aider ici. Cette méthode remplit le tableau transmis avec des nombres pseudo-aléatoires cryptographiquement sécurisés. Gardez à l’esprit que l’algorithme utilisé pour générer ces nombres aléatoires peut varier d’un agent utilisateur à l’autre.

Comme je l'ai mentionné précédemment, vous devez transmettre un nombre entier TypedArray à la méthode afin qu'elle la remplisse de valeurs aléatoires. Le contenu original du tableau sera remplacé. Le code suivant remplira notre tableau de dix éléments avec des entiers aléatoires.

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() Le constructeur nous donne un tableau de 10 entiers non signés de 8 bits. Les valeurs du tableau sont toutes initialisées à zéro.

Une fois que nous transmettons ce tableau à getRandomValues() 方法，随机数的值将保持在 0 到 255 之间。您可以使用其他类型数组来生成不同范围的随机数。例如，使用 Int8Array() 构造函数将为我们提供一个整数值在 -128 到 127 之间的数组。同样，使用 Uint16Array(), cela nous donnera un tableau de valeurs entières jusqu'à 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 ]

Générer des chaînes alphanumériques aléatoires en JavaScript

Nous allons maintenant utiliser les connaissances acquises dans la section précédente pour générer une chaîne alphanumérique aléatoire en JavaScript.

Le concept est très simple. Nous commencerons par une chaîne contenant tous les caractères requis. Dans cet exemple, la chaîne sera composée de lettres minuscules, de lettres majuscules et de chiffres de 0 à 9. Comme vous le savez peut-être déjà, nous pouvons accéder à un caractère à une position spécifique dans une chaîne en transmettant une valeur d'index à la chaîne.

Pour générer une chaîne alphanumérique aléatoire, tout ce que nous devons faire est de générer un nombre aléatoire, puis d'accéder au caractère à cet index aléatoire pour l'ajouter à notre chaîne aléatoire. L'extrait de code suivant résume le tout dans une petite fonction astucieuse :

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() 函数的调用。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!