https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/how-to-use-slice-and-substring-to-get-a-specific-range-of-strings/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/how-to-use-slice-and-substring-to-get-a-specific-range-of-strings/

特定範囲の文字列を取得するslice()とsubstring()の使い方

文字列から一部を取得したときはslice()からsubstring()メソッドを利用します。

開始インデックスから終了インデックスの直前までの文字を取り出します。

終了インデックスは省略が可能で、その場合は全文字を取得します。

文字列の途中から全て取得したいときに利用するのが良いです。

構文

メソッド意味返り値
文字列.slice(開始インデックス、[終了インデックス省略可])指定範囲内の文字列を取得する文字列
文字列.substring(開始インデックス、[終了インデックス省略可]) 指定範囲内の文字列を取得する 文字列
slice()メソッドとsubstring()メソッド

サンプルコード

slice()メソッド

slice()メソッドは正の値を指定した場合は前からの値を指定して、負の値を指定した場合は後ろからの値を指定します。

  • slice()メソッドは正の値を指定した場合は前からの値を指定して、負の値を指定した場合は後ろからの値を指定します。
  • 開始インデックスより終了インデックスの方が大きい場合は、空文字列”が返ってきます。(要するに失敗)
  • 開始インデックスに(0)を指定すると、文字列全てを取得します。

これらを踏まえて下記のサンプルコードをご覧いただくとより理解が深まるでしょう。

Output
slice(0, 4)
slice(3, -1)
slice(3, 1)
slice(0)
HTML
<div class="container my-5">
  <table class="table">
    <tr>
      <th>slice(0, 4)</th>
      <td class="result1"></td>
    </tr>
    <tr>
      <th>slice(3, -1)</th>
      <td class="result2"></td>
    </tr>
    <tr>
      <th>slice(3, 1)</th>
      <td class="result3"></td>
    </tr>
    <tr>
      <th>slice(0)</th>
      <td class="result4"></td>
    </tr>
  </table>
</div>
JavaScript
avaScript
const targetString = 'JavaScriptを勉強する';
//前から0文字目から前から4文字目まで
document.querySelector('.result1').textContent = targetString.slice(0, 4);
//前から3文字目から後ろから1文字目まで
document.querySelector('.result2').textContent = targetString.slice(3, -1);
//失敗する
document.querySelector('.result3').textContent = targetString.slice(3, 1);
//全文字取得
document.querySelector('.result4').textContent = targetString.slice(0);

substring()メソッド

substring()メソッドはslice()メソッドと違い以下の違いがあります。

  • slice()メソッドと違い、負の値を受け付けません。負の値は「0」になります。
  • 開始インデックスより終了インデックスの値が多い場合は、開始インデックスと終了インデックスが入れ替わったものとして処理されます。
  • 開始インデックスに(0)を指定すると、文字列全てを取得します。

これらを踏まえて下記のサンプルコードをご覧いただくとより理解が深まるでしょう。

Output
substring(0, 4)
substring(3, -1)
substring(3, 0)
substring(0, 3)
substring(0)
Pug
.container.my-5
	table.table
		tr
			th substring(0, 4)
			td.result5
		tr
			th substring(3, -1)
			td.result6
		tr
			th substring(3, 0)
			td.result7
		tr
			th substring(0, 3)
			td.result8
		tr
			th substring(0)
			td.result9
JavaScript
//前から0文字目から前から4文字目まで
document.querySelector('.result5').textContent = targetString.substring(0, 4);
//前から0文字目から前から3文字目まで
document.querySelector('.result6').textContent = targetString.substring(3, -1);
//前から0文字目から前から3文字目まで
document.querySelector('.result7').textContent = targetString.substring(3, 0);
//前から0文字目から前から3文字目まで
document.querySelector('.result8').textContent = targetString.substring(0, 3);
//全文字取得
document.querySelector('.result9').textContent = targetString.substring(0);
インストラクター
コメント

コメントを残す