当前位置：极客笔记 > JavaScript > JavaScript 精选笔记 > JavaScript 如何将字符转换为ASCII代码

JavaScript 如何将字符转换为ASCII代码

ASCII，即美国信息交换标准代码，是一种用于通过分配给它们特定的数值来编码字符的方法。因此分配的数值称为ASCII码，并广泛用于计算机系统中表示各种字符，包括字母、数字、标点符号和特殊控制字符。

示例1：使用charCodeAt()

以下代码演示了一个程序，该程序使用’charCodeAt()’函数从用户获取输入字符，然后显示该字符的相应ASCII码。

语法

string.charCodeAt(index)

步骤

步骤1： 开始声明HTML标签。

步骤2： 使用内部CSS为网页添加一些UI功能。

步骤3： 创建一个输入字段，允许用户输入字符。

步骤4： 创建一个按钮，将触发一个函数将字符转换为ASCII码。

步骤5： 创建一个脚本标签。

步骤6： 在

步骤8： 使用charCodeAt()函数将字符转换为ASCII值。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Character to ASCII Converter</title>
//CSS Styling from here
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

    h1 {
      color: #333;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 16px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
    }

    p {
      margin-top: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Character to ASCII Converter</h1>
    //Designing input area for user
    <input type="text" id="inputText" placeholder="Enter a character">
    //creating button that convert the value
    <button onclick="convert()">Convert</button>
    <p id="output"></p>
  </div>

  <script>
  //Javascript code for converting characters to ASCII code 
  //creating function that will invoke as the user click on the button
    function convert() {
      const input = document.getElementById("inputText").value;
      const asciiCode = input.charCodeAt(0);
      document.getElementById("output").textContent = `ASCII code: ${asciiCode}`;
    }
  </script>
</body>
</html>

这个内置函数接受一个字符串和一个索引作为参数，并返回该索引处字符的ASCII码。用户在HTML示例的输入框中输入一个字符。当点击“转换”按钮时，JavaScript代码检索字符，应用charCodeAt()函数，并在网页上显示ASCII码。

示例2 - 使用codePointAt()

codePointAt()函数是JavaScript中的一个固有方法，用于字符串。它准确地获取确定索引处字符的Unicode码点值。

在这个特定的代码中，它被用来检索用户输入的初始字符的Unicode码点值，并将其展示为输出。

语法

const codePoint = input.codePointAt(0);

示例

<!DOCTYPE html>
<html>
<head>
  <title>Character to ASCII Converter Using charPointAt()</title>
  //CSS Styling from here
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

    h1 {
      color: #333;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 16px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
    }

    p {
      margin-top: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Character to ASCII Converter Using charPointAt()</h1>
     //Designing input area for user
    <input type="text" id="inputText" placeholder="Enter a character">
    <button onclick="convert()">Convert</button>
    <p id="output"></p>
  </div>
   //Javascript code for converting characters to ASCII code
  <script>
     //creating function that will invoke as the user click on the button
    function convert() {
      const input = document.getElementById("inputText").value;
      const codePoint = input.codePointAt(0);
      document.getElementById("output").textContent = `Unicode code point: ${codePoint}`;
    }
  </script>
</body>
</html>

提供的代码利用了一个名为 "codePointAt()" 的 JavaScript 函数将字符转换为对应的 Unicode 编码点。它包括一个输入字段，您可以在其中输入一个字符。点击 "Convert" 按钮后，代码会计算并显示输入字符的 Unicode 编码点。输出以具有 id 为 "output" 的段落元素展示。这个功能方便地让您获取一个字符的 Unicode 编码点值。

结论

在 JavaScript 中将字符转换为 ASCII 编码是一项基本操作，可以在各种编程场景中实际应用。通过使用 charCodeAt() 和 charPointAt() 等方法，开发人员可以轻松地获取一个字符的 ASCII 编码或 Unicode 编码点值。无论您需要特定地使用 ASCII 编码还是处理更广泛的字符范围，JavaScript 提供了这些多功能方法来帮助您高效准确地执行字符到 ASCII 的转换。