JavaScript 随机字符串生成器

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

在本文中，我们需要使用Javascript创建一个随机字符串生成器，当用户点击按钮时，它将生成一组随机字符串并显示出来。另外，我们还可以从用户那里获取字符串的长度。在客户端上，使用文档对象模型（DOM）的概念来渲染这些生成的字符串。

方法： 为了在Javascript中生成随机字符串，我们可以使用内置方法来生成实际的字符串，并根据需要操作文档对象模型（DOM）。我们将使用Math库来访问随机函数random()，该函数将帮助生成随机索引，并与字符串的长度相乘，从而将字符串或字符集中的字符追加到结果字符串中。

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

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

方法1： 通过指定字符集的长度来生成随机字符串：

声明用于生成字符串的字符集。
从输入中获取该字符集的长度。
构建迭代循环以生成随机字符。
使用Javascript中的Math函数并将其赋值给变量。

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

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

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

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

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

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

现在，我们将使用Math.random() 函数在字符串中生成一个随机索引。在此之前，我们需要获得“characters”字符串的长度，并将其存储在一个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的索引。

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

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>String Generator</title> 
</head> 
  
<body> 
    <h2>Random String Generator</h2> 
    <h4 id="target"></h4> 
    <input id="strlength" type="number" value="5" min="1" max="100" /> 
    <button id="gen" onClick="generate()">Generate</button> 
      
    <script> 
    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
    } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 随机字符串生成器

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

从输入中获取待生成字符串的长度。
构建用于生成随机字符的迭代循环。
使用String和Math函数生成字符。

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

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

现在，我们使用函数String.fromCharCode通过for循环逐个生成字符。String.fromCharCode接受整数或UTF-16代码单元，并返回相应的字符串。在这里，我们使用整数97，即小写字母的起点。您可以参考UTF-16表获取小写字母的值。所以，得到小写字母‘a’在UTF-16中的值是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值。我们将该值分配给随机生成的字符串“result”。这将在HTML模板中显示该字符串。

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

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>String Generator</title> 
</head> 
  
<body> 
    <h2>Random String Generator</h2> 
    <h4 id="target"></h4> 
    <input id="strlength" type="number" value="5" min="1" max="100" /> 
    <button id="gen" onClick="generate()">Generate</button> 
      
    <script> 
    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
    } 
    </script> 
</body> 
  
</html>

输出结果：

JavaScript 随机字符串生成器