JavaScriptの文字列を反転する方法

JavaScriptの文字列を逆転させることは単純な仕事のように見えるかもしれません、しかし、いくつかのステップが関係していて、技術的なインタビューの文脈において、それはJavaScriptとトレードオフ/エッジケースのあなたの知識をショーケースする機会を提供します.コードを書き始める前に問題と制約を理解するのは良い習慣です.
このような制約のいくつかを次のように指定することができます.たとえば、組み込み関数のような組み込み関数を使用せずに文字列を反転するアルゴリズムを記述します.reverse() or .charAt() . それは常に良いアイデアをジャンプする前に問題を解決しようとする質問を明確にすることです.この場合、文字列を逆にするように求められます.いくつかの質問には以下のようなものがあります.

通過する文字列の条件はありますか?

文字列に正規文字または特殊文字が含まれているか

制約の最小量から始めましょう.

Given a string input, return a string with its characters in the reversed order of the input string.

この課題では、我々は使用することができる機能に制限を提供されていません.また、文字列の入力に特別な文字が含まれているか、どんな条件があれば、私たちの明確な質問をすることもできます.この課題については、入力が正規のASCII文字しか入力されないと答えましょう.
今私たちの明確な質問を聞いたことがある場合は、新しい情報を自分で考えるより多くの時間を購入し、大声であなたの思考プロセスを通信するために使用される問題を再表示することができます.次のようなことが言えるでしょう.

Given a string input of only ASCII characters, I want to create a function that returns a new string with its characters in the reverse order of the input string. I want to return a new string because I want to avoid mutating the original string input

あなたがあなたのはっきりしている質問に対する反応に基づいてそれを理解するので、あなたが問題を述べた今、これは若干の単純な例を書く良い点であるかもしれません.

reverse('hello') === 'olleh'
reverse('world!') === '!dlrow'
reverse('JavaScript') === 'tpircSavaJ'

今、我々は問題、入力と予想される出力を理解して、我々はステップにそれを壊すことができます.

文字列内の各文字を要素として配列に文字列を変換する

配列の要素の順序を反転する

逆配列を文字列に変換する

逆さの文字列を返す

function reverse(string) {
  let answer = string.split('') // step 1
  answer.reverse()  // step 2
  answer = answer.join('')  // step 3
  return answer  //step 4
}

次に、上記の例で機能をテストすることができます.

Given a string hello as an input, the function would:

1. first split the string on each character, convert it to an array with each character as an element and assign the array to the variable answer
2. reverse the order of the elements in the answer array
3. join the elements in the reversed answer array into a string and reassign it to the answer variable
4. return the answer variable, which is now a reversed string of the input

関数が動作するようになりましたので、より乾燥させるためにリファクトできます.

function reverse(string) {
  return string.split('').reverse().join('')
}

また、spread syntax 配列リテラル表記の内部で.split() 関数.

function reverse(string) {
  return [...string].reverse().join('')
}

さて、我々は同じ問題を与えられるが、より多くの制約を与えられると仮定しましょう

Given a string input, return a string with its characters in the reversed order of the input string without using built-in functions like .reverse(), .charAt(), the spread syntax; and without using an array.

簡潔さのために、我々の上記のはっきりした質問に同じ答えを仮定しましょう.私たちは最初の問題に同じアプローチを使用することができますが、新しい制約を与えられた異なるステップだけで.

戻り値として機能し、空の文字列として設定する変数を作成しますreversed

入力文字列の文字をループする

各ループ反復の中で、文字をreversed 文字列

リターンreversed

私たちがそれぞれの文字をreversed 文字列の末尾にそれらを追加した場合、入力文字列をそのまま再構築し、戻り値を逆の文字列にしたいのです.

function reverse(string) {
  let reversed = ''  // step 1
  for(let char of string) {  // step 2
    reversed = char + reversed;  // step 3
  }
  return reversed;  // step 4
}

手順3では、各繰り返しの文字を逆の文字列で連結します(最初に追加することに注意してください)、連結された文字列を逆の変数に再割り当てします.言い換えると、文字から始めて、逆のストリングをそれの最後に加える(連結する);そして、この結合文字列をreversed 変数.
我々が置くならばreversed = reversed + char< , それは我々が望むものの反対であり、ちょうど入力文字列を再構築するでしょうreverse('hello') === 'hello' ).

を使用して文字列を反転するループと連結の
また、ステップ2はfor...of ES 2015で導入された声明.構文は読みやすくなり、iterableオブジェクトを反復するループを生成します.インタビュアーがES 2015を使わないように頼むならば、あなたは常に伝統を使うことができますfor ループでも、その制限がないのならfor...of 構文はより簡単です、そして、彼らは導入されていない意図的なエラーの可能性を減らします(セミコロンの代わりにカンマを使用して、初期の表現、条件と増分式を切り離すために).
私たちの最後の挑戦のために、我々は同じ問題を与えられると仮定します、しかし、入力ストリングはちょうどASCII文字以上を含むかもしれません.

Given a string input of Unicode characters, return a string with its characters in the reversed order of the input string.

この課題では、入力文字列は7ビット以上のASCII文字で、8ビットのUnicode文字を含んでいます(ASCIIとUnicodeの違いについての大きな説明を参照してください).
Unicode文字を含む文字列を反転するために初期関数を使用すると、奇妙で予期しない結果が得られます.文字列に絵文字を入れましょう.

function reverse(string) {
  return string.split('').reverse().join('')
}

reverse('JS is fun! 😄')
// => �� !nuf si SJ

我々は、この使用して、この周りを得ることができますArray.from() 配列のような配列やiterableオブジェクトから新しい配列を作成する方法(文字列の場合).

function reverse(string) {
  return Array.from(str).reverse().join("")
}

reverse('JS is fun! 😄')
// => 😄 !nuf si SJ

結論

JavaScriptの逆の文字列アルゴリズムにアプローチする方法を学びました.

10 Common Data Structures Explained with Videos + Exercise

BaseCS podcast on CodeNewbie

詳細については、アルゴリズムのチュートリアルをチェックアウトCoderbyte そして、ソートアルゴリズムのアニメーションToptal .
私は、これが役に立つことを望みます!何か質問やコメントがあれば教えてください.あなたは私の上に従うことができます.GitHub , と私のwebsite .
この記事はもともと公開されたanthonygharvey.com 2018年7月28日