指定した場所の文字列を取り出す方法：JavaScriptの基礎20

今回はJavaScriptを使用して指定した場所の文字列を取り出す方法を紹介します。

今回のメソッドを利用すれば頭文字のテキストを入力すれば即座にリストアップされる簡易的な検索機能が作れる様になりますので、いろんな応用が効くので是非覚えてみて下さい。

指定した場所の文字列を取り出す方法

JavaScriptで指定した場所の文字列を取り出すにはcharAtメソッドを使用します。
使い方は以下です。

'KT LIFE'.charAt(1) // T
'プログラミング'.charAt(3) //ラ
'JavaScript'.charAt() // J

インデックスの開始地点は0が初めの文字です。なので
‘KT LIFE’の2文字目は「K」なので.charAt(1)だと「K」が返されます。
‘プログラミング’の4文字目は「ラ」なので.charAt(3)だと「ラ」が返ります。
また引数は省略可能で、その場合の開始地点は0になります。

以下のHTMLとJSはA~Zまでの頭文字を入力するとリストから該当するイニシャルを持つテキストが返される簡易的な検索機能です。

<div>
<label>A〜Zの何かを入力して下さい
<input id="searchword" maxlength="1" type="text"></label>
</div>
<div id="textlist">
<button data-name="Apple" data-phonetic="アップル">Apple</button>
<button data-name="Amazon" data-phonetic="アマゾン">Amazon</button>
<button data-name="Alibaba" data-phonetic="アリババ">Alibaba</button>
<button data-name="Facebook" data-phonetic="フェイスブック">Facebook</button>
<button data-name="Google" data-phonetic="グーグル">Google</button>
<button data-name="Microsoft" data-phonetic="マイクロソフト">Microsoft</button>
<button data-name="Tencent" data-phonetic="テンセント">Tencent</button>
<button data-name="Tencent" data-phonetic="テンセント">Tencent</button>
</div>

const searchword = document.querySelector('#searchword');
const textlist = document.querySelectorAll('#textlist button');
searchword.addEventListener('keyup', () => {
      const search = searchword.value;
      textlist.forEach((element) => {
          if (!search || search === '') {
            element.classList.remove('hide');
            return;
          }
          const textlist = element.dataset.name;
          const phonetic = element.dataset.phonetic;
          if (search.charAt(0) === textlist.charAt(0) || search.charAt(0) === phonetic.charAt(0)) {
            element.classList.remove('hide');
          } else {
            element.classList.add('hide');
          }
        });
    });

今回の記事で上記のコードの解説をすると話がそれまくるので、charAtメソッドを理解すればこんな感じのものも作成できるんだな、程度で大丈夫です。

○文字目〜○文字目までを取り出したい

次は、○文字目〜○文字目までを取り出したい場合のメソッドを紹介します。

ここからここまでと指定した文字列を取り出したい場合は、sliceもしくはsubstringメソッドを使用します。
開始インデックスから終了インデックスの文字列を取得します。終了インデックスは省略可能で、省略した場合は開始インデックス以降の全ての文字列が取得されます。

'KT LIFE'.slice(0 , 1) // KT
'プログラミング'.slice(3 , 6) //ラミング
'JavaScript'.substring(4) // Script

sliceは負の値を使用出来ます。一方substringの場合は負の値は0とみなされるので使用出来ません。
負の値を使用すると文末から数えた数値の開始インデックスor終了インデックスにする事が出来ます。
例えば「プログラミング」の開始位置を-4にした場合は文末の「グ」から反対に数えて4つ目の「ラ」が返されます。

'プログラミング'.slice(0 , -5) //プログ
'JavaScript'.substring(-6) // JavaScript　（-6は0とみなされる）

○文字目〜○文字目だけ取り出したい

○文字目〜○文字目だけを取り出したい場合は以下のメソッドを使用します。

substrメソッドは、取り出したい文字数を第二引数に指定します。
○文字目〜○文字目だけを取り出したい場合に使用します。

'JavaScript'.substr(4 , 6) //Script

上記の例文では4番目の文字列を開始インデックスとして、そこから6文字を返す様に指定しています。

以上が「指定した場所の文字列を取り出す方法：JavaScriptの基礎20」でした。

JavaScriptで文字列を取り扱う方法まとめ

この記事はJavaScriptで文字列を扱う方法をまとめた記事です。今回紹介するプロパティを覚えれば、長さの取得や検索、置換などをJavaScriptで指示する事が出来ます。

kt-life.net

2020.08.15