Heim  >  Artikel  >  Web-Frontend  >  Generieren Sie Zufallszahlen und Zeichenfolgen in JavaScript

Generieren Sie Zufallszahlen und Zeichenfolgen in JavaScript

王林
王林Original
2023-09-02 08:57:121311Durchsuche

Generieren Sie Zufallszahlen und Zeichenfolgen in JavaScript

Die Möglichkeit, Zufallszahlen oder alphanumerische Zeichenfolgen zu generieren, ist in vielen Situationen praktisch. Sie können damit an verschiedenen Orten im Spiel Feinde oder Nahrung hervorbringen. Sie können es auch verwenden, um Benutzern zufällige Passwörter vorzuschlagen oder Dateinamen zum Speichern von Dateien zu erstellen.

Ich habe ein Tutorial darüber geschrieben, wie man in PHP zufällige alphanumerische Zeichenfolgen generiert. Ich habe am Anfang dieses Beitrags gesagt, dass nur wenige Ereignisse wirklich zufällig sind, und das Gleiche gilt für die Zufallszahlen- oder String-Generierung.

In diesem Tutorial zeige ich Ihnen, wie Sie in JavaScript eine pseudozufällige alphanumerische Zeichenfolge generieren.

Zufallszahlen in JavaScript generieren

Beginnen wir mit der Generierung von Zufallszahlen. Die erste Methode, die mir in den Sinn kommt, ist Math.random(), die eine Fließkomma-Pseudozufallszahl zurückgibt. Die Zufallszahl ist immer größer oder gleich 0 und kleiner als 1.

Die Verteilung der zurückgegebenen Zahlen in diesem Bereich ist nahezu gleichmäßig, sodass diese Methode im täglichen Gebrauch gut Zufallszahlen generieren kann, ohne dass es zu offensichtlichen Abweichungen kommt. Hier ist die Ausgabe von zehn Aufrufen der Math.random()-Methode:

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

Generieren Sie zufällige Ganzzahlen innerhalb eines Bereichs

Wie Sie im vorherigen Abschnitt gesehen haben, gibt uns Math.random() eine Zufallszahl im Bereich von 0 (einschließlich) bis 1 (exklusiv). Angenommen, wir möchten eine zufällige Ganzzahl im Bereich von 0 (einschließlich) bis 100 (ausschließlich). Hier müssen wir lediglich den ursprünglichen Bereich mit 100 multiplizieren.

Nehmen wir als Beispiel den ersten Ausgabewert des obigen Codeausschnitts: 0,9981169188071801 wird zu 99,81169188071801, wenn er mit 100 multipliziert wird. Jetzt können wir die Math.floor()-Methode verwenden, die abrundet und die größte Ganzzahl zurückgibt, deren Wert kleiner oder gleich 99,81169188071801 ist. Mit anderen Worten, es wird uns 99 geben.

Der folgende Codeausschnitt wird zehnmal durchlaufen, um alle diese Schritte auf verschiedene Zahlen angewendet anzuzeigen.

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

Da Sie nun die Logik hinter Multiplikation und Rundung verstanden haben, können wir eine Funktion schreiben, um zufällige ganze Zahlen innerhalb der Höchstgrenze zu generieren.

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

Was ist, wenn Sie Zufallszahlen über einem bestimmten Minimum, aber unter einem Maximum generieren möchten?

In diesem Fall können Sie den Mindestwert voranstellen, um sicherzustellen, dass die resultierende Zahl mindestens dem Mindestwert entspricht. Danach können Sie einfach eine Zufallszahl generieren und max - min drücken, um sie zu skalieren und zum kleinstmöglichen Wert zu addieren.

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

Generieren Sie kryptografisch sichere Zufallszahlen

Die Methode

Math.random() 方法不适合生成加密安全的随机数,但是 Crypto.getRandomValues() eignet sich nicht zur Generierung kryptografisch sicherer Zufallszahlen, die Methode Crypto.getRandomValues() kann uns hier jedoch weiterhelfen. Diese Methode füllt das übergebene Array mit kryptografisch sicheren Pseudozufallszahlen. Beachten Sie, dass der zum Generieren dieser Zufallszahlen verwendete Algorithmus von Benutzeragent zu Benutzeragent unterschiedlich sein kann.

Wie ich bereits erwähnt habe, müssen Sie der Methode ein ganzzahliges TypedArray übergeben, damit sie mit Zufallswerten gefüllt wird. Der ursprüngliche Inhalt des Arrays wird ersetzt. Der folgende Code füllt unser Array mit zehn Elementen mit zufälligen Ganzzahlen.

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() Der Konstruktor gibt uns ein Array von 10 8-Bit-Ganzzahlen ohne Vorzeichen. Array-Werte werden alle auf Null initialisiert.

Sobald wir dieses Array an getRandomValues() 方法,随机数的值将保持在 0 到 255 之间。您可以使用其他类型数组来生成不同范围的随机数。例如,使用 Int8Array() 构造函数将为我们提供一个整数值在 -128 到 127 之间的数组。同样,使用 Uint16Array() übergeben, erhalten wir ein Array mit ganzzahligen Werten bis zu 65.535. p>

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 ]

Generieren Sie zufällige alphanumerische Zeichenfolgen in JavaScript

Wir werden nun die im vorherigen Abschnitt gewonnenen Erkenntnisse nutzen, um eine zufällige alphanumerische Zeichenfolge in JavaScript zu generieren.

Das Konzept ist sehr einfach. Wir beginnen mit einer Zeichenfolge, die alle erforderlichen Zeichen enthält. In diesem Beispiel besteht die Zeichenfolge aus Kleinbuchstaben, Großbuchstaben und Zahlen von 0 bis 9. Wie Sie vielleicht bereits wissen, können wir auf ein Zeichen an einer bestimmten Position in einer Zeichenfolge zugreifen, indem wir der Zeichenfolge einen Indexwert übergeben.

Um eine zufällige alphanumerische Zeichenfolge zu generieren, müssen wir lediglich eine Zufallszahl generieren und dann auf das Zeichen an diesem Zufallsindex zugreifen, um es an unsere Zufallszeichenfolge anzuhängen. Der folgende Codeausschnitt fasst alles in einer raffinierten kleinen Funktion zusammen:

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

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

Das obige ist der detaillierte Inhalt vonGenerieren Sie Zufallszahlen und Zeichenfolgen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn