JavaScriptの文字列操作（サンプル集でマスター）

# はじめに
文字列に変数を埋め込む時に便利なテンプレートリテラルや、切り出し・結合・置換・検索・削除など、Javascriptの基本的な文字列操作をまとめました。


## テンプレートリテラル

文字列への変数埋め込み、エスケープ無しの改行ができます。
基本は文字列を``` `テキスト` ```のように、バッククオートで囲むだけです。

```javascript:テンプレートリテラルで改行

var a = `Java
Script`;

console.log(a);
// -> Java
// -> Script
```

```javascript:テンプレートリテラル内に変数埋め込み

var num = 10;
var str = `りんごを${num}個とみかんを${num - 5}個ください`; // ${}内に計算式をいれてもOK
console.log(str); // -> りんごを10個とみかんを5個ください
```

エスケープはシングルクオートやダブルクオートのように、``` \ ```でOKです。

```javascript:テンプレートリテラル内のエスケープ

var a = `Java\\Script`;
console.log(a); // -> Java\Script
```


## 連結（結合）
``` + ``` 演算子で連結

```javascript:+演算子で連結

var a = 'Java';
var b = 'Script';
var result = a + b ;
console.log(result); // -> JavaScript
```
<br>

``` `文字列` ``` テンプレートリテラルで連結

```javascript:テンプレートリテラルで文字列を連結

var a = '6';
var b = '2';
var c = '火';
var result = `今日は${a}月${b}日、${c}曜日です`;
console.log(result); // -> 今日は6月2日、火曜日です
```
<br>

``` 対象の配列.join('つなぎ目の文字列'); ```

```javascript:.joinで配列の文字列を連結

var a = ['Hello', 'World'];
var result = a.join('');
console.log(result); // -> HelloWorld
```
<br>

``` 対象の配列.join(''); ```

```javascript:.joinでつなぎ目の文字列を指定

// つなぎ目の文字列を指定 -> 「--」 
var a = ['Hello', 'World'];
var result = a.join('--');
console.log(result); // -> Hello--World
```

``` 文字列と数値を連結すると、文字列 ```になります。


## 切り出し
```対象の文字列.slice( 開始位置, 終了位置 ); ```

```javascript:.slice

var str = '本日も、よろしくお願いします！';

var result = str.slice(0, 3);
console.log(result); // -> 本日も

// 開始位置を後ろから数えて切り出し -> 開始位置:後ろから７文字目, 文字数:文字列の最後まで
var result2 = str.slice(-7);
console.log(result2); // -> お願いします！
```
<br>

```対象の文字列.substr( 開始位置, 切り出す文字数 ); ```

```javascript:.substr

var str = '本日も、よろしくお願いします！';

var result1 = str.substr(0, 3);
console.log(result1); // -> 本日も

// 開始位置を後ろから数えて切り出し -> 開始位置:後ろから７文字目, 切り出す文字数:３文字（省略すると文字列の最後まで）
var result2 = str.substr(-7, 3);
console.log(result2); // -> お願い
```
<br>

```対象の文字列.substring( 開始位置, 終了位置 ); ```

```javascript:.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( 区切り文字 ); ```

```javascript:.split

var str = '2018, 2019, 2020';
var result = str.split(','); // 「,」 カンマ区切りで分割して配列に格納
console.log(result); // -> ["2018", " 2019", " 2020"]
```


## 置換・削除
```対象の文字列.replace( 置換前の文字列, 置換後の文字列 ); ```

```javascript:.replaceで置換

var str = '夕食はラーメンとカレーです';
var result = str.replace('カレー', '餃子');
console.log(result); // -> 夕食はラーメンと餃子です
```
<br>

```対象の文字列.replace( 削除したい文字列, '' ); ```

```javascript:.replaceで削除

var str = '夕食はラーメンとカレーです';
var result = str.replace('とカレー', '');
console.log(result); // -> 夕食はラーメンです
```


## 検索
対象の文字列を含むかどうかのチェック。

```対象の文字列.indexOf( 検索したい文字列 ); ```

```javascript:.indexOfで検索（前方一致）

var str = 'おはようございまーす';
var result1 = str.indexOf('ございまー');
var result2 = str.indexOf('!');

console.log(result1); // -> 4
console.log(result2); // -> -1
```
検索したい文字列を含む　　：インデックスを返す（0文字目から数えて何文字目か？）
検索したい文字列を含まない：「-1」を返す

を利用して、次のように条件分岐できます。

```javascript:.indexOfの戻り値を利用した条件分岐

if (str.indexOf('おはよう') != -1) {
  //strに「おはよう」を含む場合の処理
}
```
<br>

```対象の文字列.lastIndexOf( 検索したい文字列 ); ```

```javascript:.lastIndexOfで検索（後方一致）

var str = 'おはようございまーす';
var result1 = str.lastIndexOf('ございまー');
var result2 = str.lastIndexOf('!');

console.log(result1); // -> 4
console.log(result2); // -> -1
```
検索したい文字列を含む　　：インデックスを返す（0文字目から数えて何文字目か？）
検索したい文字列を含まない：「-1」を返す

※ 対象の文字列の最後から検索しますが、```インデックスは文字列の先頭から数えた値```です。


## トリム
対象の文字列の前後にある空白を削除する

```対象の文字列.trim(); ```

```javascript:.trim

var str = '  おはようございまーす　　　   ';
var result = str.trim();
console.log(result); // -> おはようございまーす
```


## 大文字・小文字に変換

```対象の文字列.toUpperCase(); ```

```javascript:.toUpperCase

var str = 'Chrome';
var result = str.toUpperCase();
console.log(result); // -> CHROME
```
<br>

```対象の文字列.toUpperCase(); ```

```javascript:.toLowerCase

var str = 'MSIE';
var result = str.toLowerCase();
console.log(result); // -> msie
```


## 文字列を数値にする

```Number( 文字列 );```

```javascript:Number

var str = '123';
var result = Number(str);
console.log(result); // -> 123

// typeofで型判定
console.log(typeof result) // -> number
```

## 数値を文字列にする

```String( 数値 );```

```javascript:String

var num = 123;
var result = String(num);
console.log(result); // -> 123

// typeofで型判定
console.log(typeof result) // -> string
```

## 文字数をカウント

```対象の文字列.length; ```

```javascript:.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```も便利に使えます。（長くなるので別の機会にまとめます）