NEW ARTICLE
Vue warn: Invalid expression for dynamic argument expressionの解決方法
  1. HOME
  2. javascript
  3. javascript sliceとsubstringの違い

javascript sliceとsubstringの違い

javascript sliceとsubstringの違い

javascriptで、sliceとsubstringの違いを掲載してます。パファーマンスはあまり変わりませんが範囲外の範囲を指定した際に結果が異なります。ブラウザはchromeを使用しています。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 109.0.5414.75
Javascript サンプル集はこちら

sliceとsubstringの違い

どちらも、以下のように指定した範囲で文字を抽出することができる関数です。

文字列.slice(開始位置0から,終了位置)
文字列.substring(開始位置0から,終了位置)

実際に実行してみると、同じように取得することが可能です。

let str = "abcde"

// 3文字目から4文字目まで抽出
console.log( str.slice(2,4) ) // cd
console.log( str.substring(2,4) ) // cd

ただし、以下のように開始位置が終了位置より大きい場合は「slice」は空が返り、
「substring」は「2文字目から4文字目」までが取得されます。

let str = "abcde"

// 開始位置が終了位置より大きい場合
console.log( str.slice(4,1) ) // 
console.log( str.substring(4,1) ) // bcd

また、マイナスを指定した場合は「slice」は後ろからマイナス分の文字が返り
「substring」は全て取得されます。

let str = "abcde"

// マイナスを指定した場合
console.log( str.slice(-2) ) // de
console.log( str.substring(-2) ) // abcde

また、同じ結果が返る処理を行った場合、パフォーマンスはほぼ同じとなります。

<chrome 102.0.5005.115>
実行回数:1000000回 関数名:slice    実行時間:1.70(ms)
実行回数:1000000回 関数名:substring 実行時間:1.80(ms)

<firefox97>
実行回数:1000000回 関数名:slice    実行時間:5.00(ms)
実行回数:1000000回 関数名:substring 実行時間:6.00(ms)