使用 JavaScript 的随机字符串生成器

JavaScript是一种轻量级、跨平台的解释性脚本语言。它以开发网页而闻名，许多非浏览器环境也使用它。 JavaScript 可用于客户端开发以及服务器端开发。

在本文中，我们需要使用 Javascript 创建一个随机字符串生成器，它将生成一组随机字符串并在用户单击按钮时显示出来。此外，我们还可以从用户那里获取字符串长度的输入。在客户端，一旦使用文档对象模型 (DOM) 概念生成，它将呈现这些字符串。

方法：为了在 Javascript 中生成随机字符串，我们可以使用内置的方法来实际生成字符串并相应地操作文档对象模型 (DOM)。我们将使用数学库访问 random()函数，该函数将有助于生成随机索引和字符串长度的倍数，字符串，它将在传递字符串字符字符集时附加字符串或字符集中的字符。

我们可以通过 2 种方式生成随机字符串，即，我们可以为指定长度的字符集迭代循环，或者我们可以使用String.fromCharCode()方法将 UTF-16 代码转换为其等效字符并返回字符串。通过使用第二种方法，我们可以手动从用户那里获取字符串长度的输入，然后通过访问 DOM 元素生成该特定长度的字符串。对于这两种方法，我们将使用 Math.random()函数。

生成随机字符串：在这里，我们将只生成带有小写字母字符的字符串。让我们从讨论生成字符串的两种不同方法开始。

方法一：从指定长度的字符集生成随机字符串：

• 声明将用于生成字符串的字符集。
• 从输入中访问该字符集的长度。
• 构造随机字符生成的迭代循环。
• 在 javascript 中使用数学函数并将它们分配给变量。

我们将利用上述概念并使用 Javascript 和 DOM 操作随机生成用户定义长度的字符串。

定义字符集：我们定义了一个变量“字符” ，它将包含我们需要的所有字符。我们将使用另一个变量“result” ，它被初始化为一个空字符串。
访问字符串的长度：之后，我们将通过使用document.getElementById方法来获取我们需要生成的字符串的长度，以访问包含该长度的 HTML 元素或用户输入字段。

length = document.getElementById("strlength").value;

因此，我们使用了在 HTML 标签中声明的“strlength” id。我们可以使用“.value”属性获取元素的值，然后将其分配给“length”变量。因此，我们现在已经获得了需要生成的字符串的长度。

生成随机字符：我们将使用 for 循环生成 n(length) 个字符并将它们附加到字符串中。循环将从 0 运行到长度 -1，因为索引值从 0 开始。

for ( let i = 0; i < length; i++ ) {
        // Code
}

现在，我们将使用Math.random()函数在字符串中生成随机索引。在此之前，我们需要获取“字符”字符串的长度并将其存储在 const 变量“charactersLength”中。这将为我们提供“charactersLength ”字符串的长度，即 26。现在，使用charAt()函数将返回字符中指定索引处的字符串，我们可以获得随机数。

Math.random()函数将给出 0 和 1 之间的值，即十进制值，我们需要将其四舍五入以获得整数值。因此，我们使用Math.floor对十进制值进行四舍五入。我们将Math.random()函数与变量charactersLength 相乘，得到精确的整数值。因此，这将给我们一个介于 0 和characterslength -1 之间的整数。

Math.floor(Math.random() * charactersLength)

上面的语法将给出介于 0 和charactersLength -1 长度之间的整数，因为 Javascript 中的字符串是基于 0 的索引。

因此，通过使用字符.charAt()方法，我们可以获得该特定索引处的字符。我们最后将它添加到空字符串“result”中，在循环结束时，我们得到一个带有随机字符的字符串。

示例：此示例描述了为指定长度的字符生成随机数。

HTML

  

    
    String Generator

  

    Random String Generator
    
    
    Generate
      
    
    function generate() {
        let length = document.getElementById("strlength").value;
        const characters = 'abcdefghijklmnopqrstuvwxyz';
        let result = ' ';
        const charactersLength = characters.length;
        for(let i = 0; i < length; i++) {
            result += 
            characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        document.getElementById("target").innerHTML = result
    }
    

  

输出：

方法 2：使用 String.fromCharCode()函数生成随机字符串：

• 从输入中获取要生成的字符串的长度。
• 构造随机字符生成的迭代循环。
• 使用字符串和数学函数来生成字符。

我们可以使用String.fromCharCode()等内置函数来生成随机字符。声明字符集和访问其长度的步骤将类似于第一种方法，即，我们将创建长度变量来获取用户输入的长度。之后，我们创建一个空字符串“result”来存储生成的字符串。然后我们运行一个 for 循环来迭代字符串的长度。

for ( let i = 0; i < length; i++ ) {
       // Code
}

现在，我们使用函数String.fromCharCode 使用 for 循环一一生成字符。 String.fromCharCode 采用整数或 UTF-16 代码单元并给出等效的字符串。在这里，我们使用整数 97，即小写字母的起点。您可以参考 UTF-16 表来获取小写字母的值。因此，在 UTF-16 中，小写字母 'a' 是 97，我们可以将 26 加到数字上，得到最后一个字母 'z' 为 122。所以，我们只需要生成 26 个随机数并将它们添加到 97。

我们可以使用Math.random()函数返回一个介于 0 和 1 之间的值，并获取我们需要的整数值 floor()函数来获取确切的整数值，因此，我们使用Math.floor() 。但这只会得到 0 ，每次我们需要将数字Math.random()乘以 26 以获得所需的结果。

97 + Math.floor(Math.random() * 26)

这将给出 97 到 122 之间的值，即“a”到“z”。因此，通过将它们包含在函数String.fromCharCode() 中来获取实际的字符串。

显示生成的字符串：我们使用 innerHTML 属性显示字符串，并使用其 id 值访问 HTML 元素。因此，使用“document.getElementById”方法从 HTML 代码中获取 id 为“target”的元素 h4，然后使用“.innerHTML”访问 HTML 值。我们将该值分配给随机生成的字符串“ 字符串”。这将在 HTML 模板中显示字符串。

document.getElementById("target").innerHTML = result;

示例：此示例描述了使用 String.fromCharCode()函数生成随机数。

HTML

  

    
    String Generator

  

    Random String Generator
    
    
    Generate
      
    
    function generate() {
        let length = document.getElementById("strlength").value;
        let result = ' ';
        for(let i = 0; i < length; i++) {
            result += 
            String.fromCharCode(97 + Math.floor(Math.random() * 26));
        }
        document.getElementById("target").innerHTML = result
    }
    

  

输出：