JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで大文字と小文字が混在する文字列を小文字に変換する方法|自作関数convertToLower()の実装

はじめに

JavaScriptには文字列を小文字に変換する標準メソッドtoLowerCase()が用意されていますが、本記事では、ASCIIコードを直接操作することで、大文字と小文字が混在する文字列をすべて小文字に変換する独自の関数convertToLower()を実装する方法を解説します。

問題

文字列に対して呼び出すと、その文字列内の大文字(A〜Z)をすべて小文字(a〜z)へ変換し、新しい文字列として返すJavaScript関数 convertToLower() を作成します。

たとえば、関数への入力と期待される出力は以下のとおりです。

入力:

const str = 'ABcD123';

出力:

const output = 'abcd123';

数字や記号など、英字以外の文字は元のまま保持されます。

実装例

以下が実際のコードです。

const str = 'ABcD123';

String.prototype.convertToLower = function(){
    let res = '';
    for(let i = 0; i < this.length; i++){
        const el = this[i];
        const code = el.charCodeAt(0);
        if(code >= 65 && code <= 90){
            res += String.fromCharCode(code + 32);
        }else{
            res += el;
        }
    }
    return res;
};

console.log(str.convertToLower());

実行結果:

abcd123

コードの仕組み

この関数のポイントを順番に確認していきましょう。

  1. プロトタイプへの拡張: String.prototype.convertToLower を定義することで、任意の文字列からメソッドとして直接呼び出せるようになります。
  2. 1文字ずつの走査: ループで各文字を取り出し、charCodeAt(0) によってUnicode(ASCII)コードポイントを取得します。
  3. 大文字の判定: 英大文字「A〜Z」のコード範囲は65〜90です。この範囲内にある場合のみ大文字と判定します。
  4. 小文字への変換: 対応する大文字と小文字のコード値はちょうど32異なります。そこで code + 32String.fromCharCode() に渡すことで小文字へ変換できます(例:「A」=65 → 「a」=97)。
  5. それ以外の文字: 数字・記号・すでに小文字の文字などは、変換せずそのまま結果に連結します。

補足:実務ではtoLowerCase()が推奨

上記の実装は、文字コードの扱いを理解するうえで非常に有益な学習例です。ただし、実際の開発では標準メソッドの toLowerCase() を使うのが最もシンプルで確実です。標準APIはアクセント付き文字などの国際化対応も適切に行ってくれるため、特別な理由がない限りこちらを利用しましょう。

console.log('ABcD123'.toLowerCase()); // abcd123
  1. JavaScriptで文字列を真偽値(Boolean)に変換する方法

    JavaScriptでは、文字列が「true」というリテラルと一致するかどうかを比較演算子で判定することで、文字列を実質的に真偽値(Boolean)として扱うことができます。ここでは、==(緩い等価比較)と===(厳密等価比較)の2つの方法を使った具体例を紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: &

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析(パース)し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum