JavaScript - 文字列反転、逆方向に出力

JavaScriptで文字列の文字を逆さまに反転する方法を紹介します。あるいは、区切り文字で区切られた単語を逆順に変更して文字列にする方法を紹介します。

1. reverse() を使用して文字列の文字を逆順に変更

以下の例は、文字列の文字を逆さまに反転する例です。まず split(``) は文字列の文字を 1 つずつ分離して配列にします。そして reverse() は配列内の要素の順序を逆順に変更します。最後に、 join(``) は配列の要素を1つの文字列にまとめます。このプロセスを経ると、文字列の文字は逆順に変わります。

const str = 'Hello, World';

const reversed = str.split('').reverse().join('');
console.log(reversed);

Output:

dlroW ,olleH

上記の手順を段階的に出力してみると、もう少し分かりやすくなりますが、以下のように出力されます。

const str = 'Hello, World';

console.log(str.split(''));
console.log(str.split('').reverse());
console.log(str.split('').reverse().join(''));

Output:

[
  'H', 'e', 'l', 'l',
  'o', ',', ' ', 'W',
  'o', 'r', 'l', 'd'
]
[
  'd', 'l', 'r', 'o',
  'W', ' ', ',', 'o',
  'l', 'l', 'e', 'H'
]
dlroW ,olleH

2. reverse関数を直接実装して文字列を反転する

JavaScriptで基本的にサポートされている関数を使用せずに、直接次のように関数を実装できます。 reverseString() の引数に文字列を渡すと、逆順に変更された文字列が返されます。

function reverseString(str) {
  let reversed = '';
  for(let i = str.length - 1; i >= 0; i--) {
    reversed = reversed + str[i];
  }
  return reversed;
};

const reversed = reverseString('Hello, World');
console.log(reversed);

Output:

dlroW ,olleH

3. 区切り文字で区切られた単語を逆に反転する

以下のように、区切り文字 , で区切られた単語を逆順に変更できます。文字を逆順に変更したのと同じ方法ですが、 split() に区切り文字 , を引数として渡すことが異なります。 split() で区切られた単語の配列を reverse() に逆順に変更し、 join(,) に再組み立てすると反転される文字列が返されます。

const str = 'Hello,World,JavaScript';

const reversed = str.split(',').reverse().join(',');
console.log(reversed);

Output:

JavaScript,World,Hello
codechachaCopyright ©2019 codechacha