NEW ARTICLE
Syntax Error: Unexpected token in Vue component templateの解決方法
  1. HOME
  2. javascript
  3. javascript 文字列からASCIIコードに変換する

javascript 文字列からASCIIコードに変換する

javascript 文字列からASCIIコードに変換する

javascriptで、charCodeAtを使用して、文字列からASCIIコードに変換するサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.134
Javascript サンプル集はこちら

charCodeAt使い方

「charCodeAt」を使用すれば、文字列から「ASCIIコード」に変換することが可能です。

文字列.charCodeAt(index番号)

String.fromCharCode使い方

const str = "test";

console.log(str.charCodeAt(0)); // t → 116
console.log(str.charCodeAt(1)); // e → 101
console.log(str.charCodeAt(2)); // s → 115
console.log(str.charCodeAt(3)); // t → 116

実行結果

文字列の長さを超えたり「マイナス」を指定すると「NaN」が返ります。

const str = "test";

console.log(str.charCodeAt(4)); // NaN
console.log(str.charCodeAt(-1)); // NaN

数値の文字列や、少数は使用できます。

const str = "test";

console.log(str.charCodeAt('0')); // t → 116
console.log(str.charCodeAt('0.5')); // t → 116
console.log(str.charCodeAt('1')); // e → 101
console.log(str.charCodeAt('1.1')); // e → 101

console.log(str.charCodeAt(0.1)); // t → 116
console.log(str.charCodeAt(1.5)); // e → 101

サンプルコード

以下は、
「変換」ボタンをクリックすると、フォームに入力した文字列をASCIIコードに変換する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script>

  function hoge() {

    // フォームの値を取得
    let str = document.getElementById('moji').value;

    // 文字列からASCIIコードに変換して表示
    disp(str,"txt");

  }

  //フロントに表示する関数
  function disp(str,id) {

    let text = [];

    // 文字列からASCIIコードに変換
    for (let i = 0; i < str.length; i++) {
      text.push('<li class="list-group-item">' + str.charCodeAt(i) + '</li>');
    }

    //innerHTMLを使用して表示    
    document.getElementById(id).innerHTML = text.join('');

  }

</script>

<body>
  <div class="main">

    <h2 id="foo" class="badge badge-primary">ASCIIコード変換結果</h2>
    <ul id="txt" class="list-group"></ul>

    <div class="form-group">      
        <input id="moji" type="text" class="form-control">
    </div>

    <button onclick="hoge();" type="button" class="btn btn-raised btn-danger">
      変換
    </button>

  </div>
</body>

</html>

ASCIIコードに変換されていることが確認できます。

また、document.getElementByIdは省略して記述することが可能です。

let str = document.getElementById('moji').value;

// 省略
let str = moji.value;
document.getElementByIdの省略して記述する