はじめに
文字列に変数を埋め込む時に便利なテンプレートリテラルや、切り出し・結合・置換・検索・削除など、Javascriptの基本的な文字列操作をまとめました。
テンプレートリテラル
文字列への変数埋め込み、エスケープ無しの改行ができます。
基本は文字列を`テキスト`のように、バッククオートで囲むだけです。
var a = `Java
Script`;
console.log(a);
// -> Java
// -> Script
var num = 10;
var str = `りんごを${num}個とみかんを${num - 5}個ください`; // ${}内に計算式をいれてもOK
console.log(str); // -> りんごを10個とみかんを5個ください
エスケープはシングルクオートやダブルクオートのように、\でOKです。
var a = `Java\\Script`;
console.log(a); // -> Java\Script
連結（結合）
+ 演算子で連結
var a = 'Java';
var b = 'Script';
var result = a + b ;
console.log(result); // -> JavaScript
`文字列` テンプレートリテラルで連結
var a = '6';
var b = '2';
var c = '火';
var result = `今日は${a}月${b}日、${c}曜日です`;
console.log(result); // -> 今日は6月2日、火曜日です
対象の配列.join('つなぎ目の文字列');
var a = ['Hello', 'World'];
var result = a.join('');
console.log(result); // -> HelloWorld
対象の配列.join('');
// つなぎ目の文字列を指定 -> 「--」
var a = ['Hello', 'World'];
var result = a.join('--');
console.log(result); // -> Hello--World
文字列と数値を連結すると、文字列になります。
切り出し
対象の文字列.slice( 開始位置, 終了位置 );
var str = '本日も、よろしくお願いします！';
var result = str.slice(0, 3);
console.log(result); // -> 本日も
// 開始位置を後ろから数えて切り出し -> 開始位置:後ろから７文字目, 文字数:文字列の最後まで
var result2 = str.slice(-7);
console.log(result2); // -> お願いします！
対象の文字列.substr( 開始位置, 切り出す文字数 );
var str = '本日も、よろしくお願いします！';
var result1 = str.substr(0, 3);
console.log(result1); // -> 本日も
// 開始位置を後ろから数えて切り出し -> 開始位置:後ろから７文字目, 切り出す文字数:３文字（省略すると文字列の最後まで）
var result2 = str.substr(-7, 3);
console.log(result2); // -> お願い
対象の文字列.substring( 開始位置, 終了位置 );
var str = '本日も、よろしくお願いします！';
var result1 = str.substring(0, 3);
console.log(result1); // -> 本日も
// 開始位置 > 終了位置 のとき -> 開始位置:8文字目, 終了位置:4文字目
// 終了位置と開始位置は逆になる
var result2 = str.substring(8, 4);
console.log(result2); // -> よろしく
// 開始位置から文字列の先頭まで -> 開始位置:8文字目, 終了位置:文字列の先頭
var result3 = str.substring(8, -1);
console.log(result3); // -> 本日も、よろしく
分割
対象の文字列.split( 区切り文字 );
var str = '2018, 2019, 2020';
var result = str.split(','); // 「,」 カンマ区切りで分割して配列に格納
console.log(result); // -> ["2018", " 2019", " 2020"]
置換・削除
対象の文字列.replace( 置換前の文字列, 置換後の文字列 );
var str = '夕食はラーメンとカレーです';
var result = str.replace('カレー', '餃子');
console.log(result); // -> 夕食はラーメンと餃子です
対象の文字列.replace( 削除したい文字列, '' );
var str = '夕食はラーメンとカレーです';
var result = str.replace('とカレー', '');
console.log(result); // -> 夕食はラーメンです
検索
対象の文字列を含むかどうかのチェック。
対象の文字列.indexOf( 検索したい文字列 );
var str = 'おはようございまーす';
var result1 = str.indexOf('ございまー');
var result2 = str.indexOf('!');
console.log(result1); // -> 4
console.log(result2); // -> -1
検索したい文字列を含む ：インデックスを返す（0文字目から数えて何文字目か？）
検索したい文字列を含まない：「-1」を返す
を利用して、次のように条件分岐できます。
if (str.indexOf('おはよう') != -1) {
//strに「おはよう」を含む場合の処理
}
対象の文字列.lastIndexOf( 検索したい文字列 );
var str = 'おはようございまーす';
var result1 = str.lastIndexOf('ございまー');
var result2 = str.lastIndexOf('!');
console.log(result1); // -> 4
console.log(result2); // -> -1
検索したい文字列を含む ：インデックスを返す（0文字目から数えて何文字目か？）
検索したい文字列を含まない：「-1」を返す
※ 対象の文字列の最後から検索しますが、インデックスは文字列の先頭から数えた値です。
トリム
対象の文字列の前後にある空白を削除する
対象の文字列.trim();
var str = ' おはようございまーす ';
var result = str.trim();
console.log(result); // -> おはようございまーす
大文字・小文字に変換
対象の文字列.toUpperCase();
var str = 'Chrome';
var result = str.toUpperCase();
console.log(result); // -> CHROME
対象の文字列.toUpperCase();
var str = 'MSIE';
var result = str.toLowerCase();
console.log(result); // -> msie
文字列を数値にする
Number( 文字列 );
var str = '123';
var result = Number(str);
console.log(result); // -> 123
// typeofで型判定
console.log(typeof result) // -> number
数値を文字列にする
String( 数値 );
var num = 123;
var result = String(num);
console.log(result); // -> 123
// typeofで型判定
console.log(typeof result) // -> string
文字数をカウント
対象の文字列.length;
var str = 'あいうえお';
var result = str.length;
console.log(result); // -> 5
参考
https://qiita.com/kura07/items/c9fa858870ad56dfec12
http://catprogram.hatenablog.com/entry/2013/05/13/231457
おわりに
よく使うものをまとめてみました。（たぶん追記します。。）
正規表現をマスターすると.matchや.searchも便利に使えます。（長くなるので別の機会にまとめます）