Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar aksara kepada kod ASCII menggunakan JavaScript?

Bagaimana untuk menukar aksara kepada kod ASCII menggunakan JavaScript?

WBOYke hadapan: 2023-08-29 09:25:021175semak imbas

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

ASCII, yang bermaksud American Standard Code for Information Interchange, ialah kaedah pengekodan aksara dengan memberikannya kepada nilai berangka tertentu. Nilai berangka yang diberikan sedemikian dipanggil kod ASCII dan digunakan secara meluas dalam sistem komputer untuk mewakili pelbagai aksara, termasuk huruf, nombor, tanda baca, dan aksara kawalan khas.

Contoh 1: Menggunakan charCodeAt()

Kod berikut menggambarkan atur cara yang menggunakan fungsi "charCodeAt()" untuk menerima aksara yang dimasukkan oleh pengguna dan kemudian memaparkan kod ASCII yang sepadan untuk aksara tersebut.

Tatabahasa

string.charCodeAt(index)

Algoritma

Langkah 1: Mulakan dengan mengisytiharkan tag HTML.

Langkah 2: Tambahkan beberapa fungsi UI pada halaman web menggunakan CSS dalaman.

Langkah 3: Buat medan input untuk membolehkan pengguna memasukkan aksara.

Langkah 4: Buat butang yang akan mencetuskan fungsi yang menukar aksara kepada ASCII.

Langkah 5: Buat tag skrip.

Langkah 6: Isytihar fungsi penukaran di dalam teg <script>. </script>

Langkah 7: Isytihar pembolehubah input untuk mendapatkan input pengguna.

Langkah 8: Gunakan fungsi charCodeAt() untuk menukar aksara kepada nilai ASCII.

Contoh

<!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>

Fungsi terbina dalam ini mengambil rentetan dan indeks sebagai parameter dan mengembalikan kod ASCII aksara pada indeks tersebut. Pengguna memasukkan aksara ke dalam medan input dalam contoh HTML. Apabila anda mengklik butang Tukar, kod JavaScript mendapatkan semula aksara, menggunakan fungsi charCodeAt() dan memaparkan kod ASCII pada halaman web.

Contoh 2 - Menggunakan codePointAt()

Fungsi codePointAt() ialah kaedah sedia ada untuk mengendalikan rentetan dalam JavaScript. Ia memperoleh nilai mata kod Unikod watak dengan tepat pada indeks yang ditentukan.

Dalam kod khusus ini, ia digunakan untuk mendapatkan semula nilai titik kod Unikod bagi aksara awal daripada input pengguna dan memaparkannya sebagai output.

Tatabahasa

const codePoint = input.codePointAt(0);

Contoh

<!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>

Kod yang disediakan menggunakan fungsi JavaScript yang dipanggil "codePointAt()" untuk menukar aksara kepada titik kod Unicode yang sepadan. Ia mengandungi medan input di mana anda boleh menaip aksara. Selepas mengklik butang "Tukar", kod akan mengira dan memaparkan titik kod Unikod bagi aksara yang dimasukkan. Output dipaparkan dalam elemen perenggan dengan ID "output". Ciri ini membolehkan anda mendapatkan nilai mata kod Unicode dengan mudah bagi sesuatu aksara.

Kesimpulan

Menukar aksara kepada kod ASCII dalam JavaScript ialah operasi asas yang mempunyai aplikasi praktikal dalam pelbagai senario pengaturcaraan. Pembangun boleh mendapatkan kod ASCII atau nilai titik kod Unicode aksara dengan menggunakan kaedah seperti charCodeAt() dan charPointAt(). Sama ada anda perlu bekerja secara khusus dengan kod ASCII atau dengan julat aksara yang lebih luas, JavaScript menyediakan kaedah serba boleh ini untuk membantu anda melaksanakan penukaran aksara kepada ASCII dengan cekap dan tepat.

Atas ialah kandungan terperinci Bagaimana untuk menukar aksara kepada kod ASCII menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membuat pernyataan if dalam JavaScript untuk memeriksa sama ada pembolehubah sama dengan perkataan tertentu?Artikel seterusnya：Bagaimana untuk membuat pernyataan if dalam JavaScript untuk memeriksa sama ada pembolehubah sama dengan perkataan tertentu?

Artikel berkaitan

Lihat lagi