【substrはNG?】JavaScriptで文字列切り出し

JavaScript共通部品, 実装サンプル

JavaScript

JavaScriptで文字列を切り出す方法

String系のメソッドを利用する場合、

「substr(サブストリ)」

「substring(サブストリング)」

「slice(スライス)」の3つが候補にあがります。

 

この記事で取り上げるのは、

「substring」と「slice」の2つについてです。

※2019年03月現在、「substr」は非推奨メソッドです。

 

ソースコード

// yyyy-MM-dd の分割イメージ(2019と03と12に分割する!)
let ymd = "2019-03-12";

// 入力形式固定の場合や、デリミタが存在しない(yyyyMMdd)場合の処理イメージ

// ymd.substring(開始位置,終了位置) ※終了位置省略:後ろの文字全部取得
console.log(ymd.substring(0,4));
console.log(ymd.substring(5,7));
console.log(ymd.substring(8,10));

// ymd.slice(開始位置,終了位置) ※終了位置省略:後ろの文字全部取得
console.log(ymd.slice(0,4));
console.log(ymd.slice(5,7));
console.log(ymd.slice(8,10));


// yyyy-M-d の分割イメージ(2013と6と9に分割する!)
ymd = "2013-6-9";

// 入力形式が変動する(yyyy-MM-ddとyyyy-M-dを両方扱う)場合の処理イメージ

// substring(開始位置,終了位置) ※終了位置省:後ろの文字全部取得
console.log(ymd.substring(0,4));
console.log(ymd.substring(ymd.indexOf("-") + 1 ,ymd.lastIndexOf("-")));
console.log(ymd.substring(ymd.lastIndexOf("-") + 1, ymd.length));

// ymd.slice(開始位置,終了位置) ※終了位置省略:後ろの文字全部取得
console.log(ymd.slice(0,4));
console.log(ymd.slice(ymd.indexOf("-") + 1 ,ymd.lastIndexOf("-")));
console.log(ymd.slice(ymd.lastIndexOf("-") + 1, ymd.length));

substringとsliceの違いって?

ソースを見ると、どうにも違いが無いように見える。

実は、引数に「負数」を受け取った時の挙動がちがいます。

sliceは負数の場合、末尾から文字を切り出します。

この動きを利用することで、ゼロパディング処理が簡単に実装できます。

// ゼロパディング 5桁の処理イメージ(634を00634に変換する!)
let str = "634";

/** パディング桁数 */
const PADDING = 5;
/** パディング用文字 */
var padStr = "";
// 指定数ループしてパディング用文字を生成
for (let i = 0; i < PADDING; i++) {
    padStr += "0";
}

// substring(負数) ※負数:0として扱います。
console.log((padStr + str).substring(PADDING * -1)); // 00000634

// substringでゼロパディングを実装する場合
console.log((padStr + str).substring((padStr + str).length - PADDING, (padStr + str).length));

// str.slice(負数) ※負数:右端から指定数(絶対値)分を切り出します。
console.log((padStr + str).slice(PADDING * -1));

// 負数指定sample
str.slice(-2);
console.log(str);    // 634 ※sliceだけでは変数は変わりません!
str = str.slice(-2); // ※ちゃんと代入しましょう!
console.log(str);    // 34

最後に

通常は、「substring」を利用して、

右端切出しを行う必要があれば「slice」で良いかな。

未だに「substr」を使って実装する人もいるのが現実。

その時は、「非推奨だよ!」と言ってあげましょう。

 

stringメソッドがありますが、「共通部品化」しておくのがオススメ。

「IsEmpty」によるバリデーションチェックや、

「Trim有無」なども組み合わせた上で、汎用化すると良いでしょう。

スポンサーリンク