【Javascript】substringとsliceの違いをサンプルコードを使って解説！

2022.07.08 更新

1,008views

JavaScript PHP プログラミング

PHPでサーバーから取得したり操作した文字列をjavascriptに受け渡す方法として、PHPでidやclassに文字列を出力し、javascriptで取得する方法とscriptコード自体にPHPから出力する方法があります。

2022/07追記

HTMLのdata属性を使うことで渡す方がメジャーです。

以下のサンプルコード自体には間違い部分はありませんが、普通にdata属性で渡してください。

今回は前者の方法をjavascriptで文字列の一部を切り取り操作することのできる"substring"関数と"slice"関数を使うことで変数の受け渡しをしていく方法を使い方と一緒に確認します。

もう１つ使用例を見て使い方を確認

substring()とは

substring関数は引数で指定した値によって文字列を抽出して返す関数です。

文字数の第一引数で指定した次の文字から第二引数で指定した文字までの文字列を取り出すことができます。

第二引数を省略することはできません。

第一引数が第二引数よりも大きい場合は、(第二引数,第一引数)として処理されます。

引数に負の数字を代入した場合は0見なされて最初の文字から切り抜き始めます。

ではsubstring関数を使用している例を見てみましょう。

const className1 = 'tuna'

let str1 = className1.substring(1,3)
let str2 = className1.substring(1)
let str3 = className1.substring(4,2)
let str4 = className1.substring(-4,2)

console.log(str1)// => 'un'
console.log(str2)// => 'una'
console.log(str3)// => 'na'
console.log(str4)// => 'tu'

slice()のとは

slice関数も引数で指定した値によって文字列を抽出して返す関数です。

substring関数と同様に、文字数の第一引数で指定した次の文字から第二引数で指定した文字までの文字列を取り出すことができます。

第二引数を省略すると最後まで文字を切り出します。

第一引数が第二引数よりも大きい場合は、空文字を返します。

引数に負の数字を代入した場合は後ろから数えて指定した数の１つ前の文字を指定した扱いになります。

ではslice関数を使用している例を見てみます。

const className2 = 'shrimp'

let str1 = className2.slice(1,3)
let str2 = className2.slice(1)
let str3 = className2.slice(4,2)
let str4 = className2.slice(2,-1)

console.log(str1)// => 'hri'
console.log(str2)// => 'hrimp'
console.log(str3)// => ''
console.log(str4)// => 'rim'

PHPからJavascriptへ変数の受け渡し

JavascriptをPHPファイルに埋め込む場合は直接書き込めば良いので、今回はJavascriptを外部ファイルとして読み込む場合の受け渡し方法です。

例えばGET送信で取得した数字をJavascriptに受け渡すとします。この場合一旦idに出力して値を保有することができますが、idは数字で始まることは禁止されているのでJavascriptで取得する場合はslice関数を使う必要があります。

/* index.php?fish=1 */
<?php
$fishNum = $_GET['fish']
if($fishNum === 1){
  $fishName = '鮫'
}
?>
<html>
  <head>~~~~~</head>
  <body>
    <div class="fish-name" id="data_<? echo $fishNum ?>">
      <? echo $fishName ?>
    </div>
    <script src="script.js"></script>
  </body>
</html>

このときHTMLコードは

<html>
  <head>~~~~~</head>
  <body>
    <div class="fish-name" id="data_1">
      鮫
    </div>
    <script src="script.js"></script>
  </body>
</html>

と表示されます。ここで外部のJavascriptファイルからPHPの変数$fishNumに代入した「１」を取得するには

/* fishScript.js */
let fishData = document.querySelector('.fish-name').getAttribute('id')
let fishNum = fishData.slice(5)

console.log(fishData)// => 'data_1'
console.log(fishNum)// => 1

のようにslice関数を使って受け渡しができました。

もう１つ使用例を見て使い方を確認

初学者が作成しがちなjavascriptを使って作るプログラムがデジタル時計です。時計は1分や4分など1桁の時は01や04と表し、14分などと2桁の場合はそのまま表します。この処理もslice関数を使って書くことができます。

function z (num){
  const z = String('00' + num)
  return z.slice(z.length-2)
}

console.log( z(4) ) // => '04'
console.log( z(14) ) // => '14'

まとめ

今回はsubstring関数とslice関数の説明とslice関数を用いたPHPの受け渡しの方法を紹介しました。基本的にはidやclassを介して受け渡さないで、直接受け渡すことで十分な場合も多いですが、どうしても外部ファイルを使わなければいけない場合や、WebアプリでPHP変数を要素に落とし込んだ後にJavascriptで操作しなければいけない場合には必要になることもあると思います。

柔軟な変数操作が可能になるので必要に応じて使っていきましょう。