substr とは
- ここで説明する substr とは次の語句からなる JavaScript のメソッドです。
- substring
- 読み: サブストリング
意味: 部分列 (文字部分列、配列部分列)
substr メソッドの概要
このメソッドは、引数に与えた開始値と長さで、呼び出し元の文字列の部分列を返します。
構文
サンプルを見る前に構文を確認しておきます。
var strNewString = String.substr(intStart [, intLength]);- intStart: 取り出す (切り出す) 部分列の開始位置をインデックス値で指定します。負の数値を与えた場合、最後の文字から数えて何番目かを指定したことになります。
- intLength: 開始位置から何文字分を切り出すかを数値で指定します。これはオプションなので必須ではありません。
サンプルコードと実行結果
ここでは、substr() の第一引数に 正の数と負の数を与えた場合、の結果を見てみます。 またオプションとなる第二引数も与えて結果をみてみましょう。
サンプルコード: HTML
<body>
<div id="idOriginal"> user-ywork2020 </div>
↓
<div><output id="idOutput1"> innerText </output></div>
<div><output id="idOutput2"> innerText </output></div>
<script>...</script>
</body>
- 02: div id="idOriginal (この要素のテキストをオリジナルの文字列とします。)
- 04: output id="idOutput1" (ここに substr(5, 7) の実行結果を出力します。)
- 05: output id="idOutput2" (ここに substr(-5, 3) の実行結果を出力します。)
サンプルコード: script
<script>
let elmOriginal = document.getElementById("idOriginal");
let elmOutput1 = document.getElementById("idOutput1");
let elmOutput2 = document.getElementById("idOutput2");
elmOutput1.innerText = elmOriginal.innerText.substr(5, 7);
elmOutput2.innerText = elmOriginal.innerText.substr(-5, 3);
</script>
- 05: substr(5, 7) (切り出しのスタートは インデックス 5 なので 6 文字目となります。)
- 06: substr(-5, 3) (切り出しのスタートは -5 なので 最後から数えて 5 文字目となります。)
user-ywork2020
↓
substr(5, 7)
substr(-5, 3)