はじめに

inputでユーザーが入力した値の一部だけを取得して画面に表示させたいことがありました。
色々と方法がありそうですが、自分が調べた内容を備忘録に残そうと思います。

.substring()で文字列の一部を取得する

文字列の一部を指定して取得するためには".substring"を使用します。
構文は下記になります。

str.substring(indexStart[, indexEnd])

詳しい説明

公式ドキュメントより引用して下記にまとめようと思います。

indexStart/indexEnd

・indexStart
取得する文字列の最初の文字の位置を指定する引数。
配列と同じように、一文字目の位置は0。

・indexEnd
文字列の中から取得しない文字の位置を指定する引数。
この引数は省略可能。

const str = 'Mozilla';

console.log(str.substring(1, 3));
//"oz"が表示される。
// １の位置の"o"から、3の位置にある"i"を含まない"oz"が取得される。

console.log(str.substring(2));
// "zilla"が表示される
// indexEndの引数がないため、２の位置以降の全ての文字列を取得する。

indexStartとindexEndの引数が等しい場合

indexStartとindexEndの引数が等しい場合は、空文字を返す。

const str = 'Mozilla';

console.log(str.substring(0, 0));
// ""(空文字）が返ってくる

・引数が0未満の場合/文字数を超えた引数が指定された場合

引数が0未満の場合は0に、
文字数を超えた引数が指定された場合は最後の文字の位置として扱われる。

const str = 'Mozilla';

console.log(str.substring(-45, 100));
//str.substring(0, 6)として扱われる
// "Mozilla"が表示される

indexStart が indexEnd より大きかった場合

indexStart が indexEnd より大きかった場合、引数が交換される

const str = 'Mozilla';

console.log(str.substring(7, 4));
// "lla"が表示される
// indexStartの引数が4,indexEndの引数が7に交換されている

参考