JavaScriptのsubstring()メソッドは指定の開始位置から終了位置までの文字を切り出すメソッドです。本コラムでは、substring()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. substring()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 文字列の一部分を切り出す方法
2.2. 文字列を指定の位置から最後まで切り出す方法
2.3. 引数にマイナスの数値を指定した場合
2.4. 終了位置が開始位置の数値より小さい場合
1. substring()メソッド
1.1. substring()メソッドの基本書式
●substring()メソッド
stringObj.substring(from, [to]])
1.2. パラメーター
from:切り出す文字列の開始位置を指定します。
[to]:(省略可能)切り出す文字列の終了位置を指定します。toを省略した場合は、fromから文字列の最後までを切り出します。
1.3. 戻り値
fromからtoの手前まで切り出した文字列を返します。
2. substring()メソッドの使い方
2.1. 文字列の一部分を切り出す方法
サンプルコードで文字列「０１２３４５６７８９」の一部分を切り出してみましょう。
var stringObj = "０１２３４５６７８９"; //切り出し対象の文字列
stringObj.substring(1, 4); //Stringオブジェクトの一部分を切り出す
サンプルHTMLの「JS_Sample1.html」をコピーして保存する場合は、ファイル形式を「utf-8」にします。
substring(1, 4)は、開始位置のインデックス「１」から終了位置のインデックス「４」の間の文字列を切り出します。
●JS_Sample1.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>substring() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス1からインデックス4の間の文字列が切り出されます。</p>
<button onclick="strFunction01()">substringの実行</button>
<p id="sample1"></p>
<script>
function strFunction01() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.substring(1, 4);
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
--------------------
「substring実行」ボタンをクリックして動きを確認して下さい。切り出された文字列の「１２３」が段落に表示されます。
●実行結果
ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス1からインデックス4の間の文字列が切り出されます。
2.2. 文字列を指定の位置から最後まで切り出す方法
Stringオブジェクトの文字列を指定位置から最後まで切り出すには、substringメソッドの第二引数を省略します。
var stringObj = "０１２３４５６７８９"; //切り出し対象の文字列
stringObj.substring(5); //Stringオブジェクトの一部分を切り出す
●JS_Sample2.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>substring() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス５から文字列の最後までの文字列が切り出されます。</p>
<button onclick="strFunction02()">substringの実行</button>
<p id="sample2"></p>
<script>
function strFunction02() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.substring(5);
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
--------------------
substringメソッドの開始位置のみを指定すると、指定の位置から文字列の最後まで文字を切り出します。
●実行結果
ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス５から文字列の最後までの文字列が切り出されます。
2.3. 引数にマイナスの数値を指定した場合
substringメソッドにマイナスの値を指定すると文字列の切り出しは行われません。
var stringObj = "０１２３４５６７８９"; //切り出し対象の文字列
stringObj.substring(-2);
●JS_Sample3.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>substring() method - Introduction to JavaScript</title>
<body>
<p>substringの引数にマイナスを指定すると、文字列の切り出しは行われません</p>
<button onclick="strFunction03()">substringの実行</button>
<p id="sample3"></p>
<script>
function strFunction03() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.substring(-2);
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
--------------------
●実行結果
substringの引数にマイナスを指定すると、文字列の切り出しは行われません
2.4. 終了位置が開始位置の数値より小さい場合
substringメソッドの終了位置の値を、開始位置の値よりも小さく指定すると、無条件で二つの値を反転させます。
var stringObj = "０１２３４５６７８９"; //切り出し対象の文字列
stringObj.substring(5, 1); //Stringオブジェクトの一部分を切り出す
●JS_Sample4.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>substring() method - Introduction to JavaScript</title>
<body>
<p>substringの開始位置が終了位置よりも大きい場合、無条件で反転します。</p>
<button onclick="strFunction04()">substringの実行</button>
<p id="sample4"></p>
<script>
function strFunction04() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.substring(5, 1);
document.getElementById("sample4").innerHTML = result;
}
</script>
</body>
</html>
--------------------
●実行結果
substringの開始位置が終了位置よりも大きい場合、無条件で反転します。
