先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字列を逆さまに表示したいときってどうすればいいですか？」

先生

「文字列を逆順にする方法はいくつかありますが、簡単なのはsplit、reverse、joinを組み合わせる方法です。」

生徒

「splitとかreverseとかjoinって聞いたことありますけど、どういう意味ですか？」

先生

「それぞれ簡単に言うと、splitは文字列を分割する、reverseは配列を逆順にする、joinは配列をまた文字列に結合する、という意味です。それでは実際に使ってみましょう！」

1. split、reverse、joinの組み合わせで文字列を逆順にする

JavaScriptでは、文字列を一度配列に変換して逆順にし、再び文字列に戻すことで簡単に逆順表示ができます。この方法は短く、初心者にもわかりやすいテクニックです。


const text = "Hello, World!";
const reversed = text.split("").reverse().join("");
console.log(reversed);


!dlroW ,olleH

この例では、まずsplit("")で文字列を1文字ずつの配列に分解し、reverse()で配列を逆順にして、join("")で再び文字列として結合しています。

2. splitメソッドとは？

splitメソッドは文字列を分割して配列にするためのメソッドです。文字列の中の特定の区切り文字で分けることもできますが、逆順にする場合は空文字""で分割します。こうすることで、文字列が1文字ずつ配列の要素になります。


const text = "JavaScript";
const array = text.split("");
console.log(array);


["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]

この配列をreverseで逆順にすると、文字列を逆にする準備ができます。

reverseメソッドは配列を逆順にするためのメソッドです。元の配列がそのまま逆になります。文字列を逆にしたい場合は、まず文字列を配列に変換する必要があります。


const array = ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"];
const reversedArray = array.reverse();
console.log(reversedArray);


["t", "p", "i", "r", "c", "S", "a", "v", "a", "J"]

joinメソッドは配列を文字列に結合するメソッドです。引数に文字列を指定すると、配列の要素の間にその文字列が挟まります。空文字""を指定すると、配列の要素をそのまま連結できます。


const array = ["t", "p", "i", "r", "c", "S", "a", "v", "a", "J"];
const reversedText = array.join("");
console.log(reversedText);


tpircSavaJ

これで文字列が逆順に表示されました。

この方法を使えば、文字列を逆にするだけでなく、簡単なパズルゲームや暗号のような処理にも応用できます。例えば、文字列を反転して見せると面白いエフェクトを作ることも可能です。


const message = "秘密のメッセージ";
const reversedMessage = message.split("").reverse().join("");
console.log(reversedMessage);


ジーセッメの密秘

日本語の文字列でも同じように逆順表示できます。

絵文字や特殊文字など、1文字が2つのコード単位で構成される文字（サロゲートペア）を逆順にすると、正しく表示されない場合があります。この場合は少し高度な方法が必要ですが、基本的なアルファベットや日本語の文字列には今回紹介したsplit＋reverse＋joinで十分です。