如何使用 JavaScript 將字元轉換為 ASCII 程式碼？
- WBOY轉載
- 2023-08-29 09:25:021257瀏覽
ASCII，代表美國資訊交換標準代碼，它是一種透過將字元分配給特定數值來對字元進行編碼的方法。這樣分配的數值稱為 ASCII 代碼，廣泛用於計算機系統中來表示各種字符，包括字母、數字、標點符號和特殊控製字符。
範例 1：使用 charCodeAt()
以下程式碼說明了一個程序，該程序使用「charCodeAt()」函數接收使用者輸入的字符，然後顯示該字元對應的 ASCII 代碼。
文法
string.charCodeAt(index)
演算法
第 1 步：從宣告 HTML 標籤開始。
第 2 步：使用內部 CSS 為網頁新增一些 UI 功能。
第 3 步：建立一個輸入欄位以允許使用者輸入字元。
第 4 步：建立一個按鈕，該按鈕將觸發將字元轉換為 ASCII 的函數。
第 5 步：建立腳本標記。
第 6 步：在 <script> 標記內宣告一個轉換函數。 </script>
第 7 步：宣告輸入變數以取得使用者的輸入。
第 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 程式碼點。它包含一個輸入字段，您可以在其中鍵入字元。點擊“轉換”按鈕後，代碼將計算並顯示輸入字元的 Unicode 代碼點。輸出顯示在 ID 為“output”的段落元素中。此功能可讓您方便地取得字元的 Unicode 代碼點值。
結論
在 JavaScript 中將字元轉換為 ASCII 碼是一個基本操作，在各種程式設計場景中都有實際應用。透過使用 charCodeAt() 和 charPointAt() 等方法，開發人員可以輕鬆取得字元的 ASCII 代碼或 Unicode 代碼點值。無論您需要專門處理 ASCII 代碼還是處理更廣泛的字符，JavaScript 都提供了這些多功能方法來幫助您高效、準確地執行字符到 ASCII 的轉換。
以上是如何使用 JavaScript 將字元轉換為 ASCII 程式碼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！