# JavaScript 基礎編５（学習日：9/15）（文字列）
## 文字列
### 文字列の基本
* 文字列リテラルはダブルクオート(""), シングルクォート(''), バッククォート＜ES2015以降対応＞の3種類が使用可能。
* バッククォートを利用したテンプレートリテラルは、途中改行が可能である。
* リテラルと同一記号(""等)や、特定の意味（改行、タブ等）場合、\（バックスラッシュ）を記号の手前につける。これらをエスケープシーケンスという。
* 文字列結合は演算子(+)を用いる。また、テンプレートリテラルでは、${追加したい文字列} で追加可能である。
* 文字列も、インデックスでアクセス可能である。
### 文字コード
JavaScriptは16ビット式のUnicode（UTF-16）である。
文字ごとにCodePointという一位のIDが与えられる。
a. もとの文字からhex値（16進数）に変換(toString)
```javascript=
const str = "アオイ";
// それぞれの文字をCode Unitのhex値（16進数）に変換する
// toStringの引数に16を渡すと16進数に変換される
console.log(str.charCodeAt(0).toString(16)); // => "30a2"
console.log(str.charCodeAt(1).toString(16)); // => "30aa"
console.log(str.charCodeAt(2).toString(16)); // => "30a4"
```
b. hex値（16進数）から元の形へ変換(fromCharCode)
```javascript=
const str = String.fromCharCode(
0x30a2, // アのCode Unit
0x30aa, // オのCode Unit
0x30a4 // イのCode Unit
);
console.log(str); // => "アオイ"
```
### 文字列の分解・結合
a. 分解(split) 正規表現が利用可能。
```javascript=
const str = "アオイ";
console.log("ア・オ・イ".split); // => ["ア", "オ", "イ"]
```
a. 結合(join)
```javascript=
const star = "ア・オ・イ".split("・").join("、")
console.log(star); // => ["赤", "青", "緑"]
```
### 文字列の色々
a. 文字列の長さ
文字列の長さ：文字列.length
b. 文字列の大小比較（文字列名.charCodeAt(0)）
CodeUnit同士の大小を比較する。
c. 文字列の指定
(1) sliceを使う場合
(2) substringを使う場合
```javascript=
const array = ["A", "B", "C", "D", "E"];
console.log(array.slice(1, 4)); // => ["B", "C", "D"]
console.log(array.slice(-1));//=>["E"] -を付けると逆順
console.log(array.slice(3, 1);//=>[] 第1引数>=第2引数の場合、空
console.log(array.substring(3, 1));//=>["B", "C"] 引数の順番に関係なく、小さい方が最初のインデックス、大きい方が目標のインデックスとなる。
```
### 文字列の検索
a 文字列による検索（indexOf）
```javascript=
const array = "ごごはいちいちいちごきぶん";
console.log(array.indexof("いち"));// =>3
console.log(array.indexof("ごご"));// =>0
console.log(array.indexof("あお"));// =>-1
```
b. 真偽値の取得
* startsWith：文字列の先頭の検索
* endsWith：文字列の末尾の検索
* includes：文字列に含まれるかの検索
```javascript=
const array = "ごごはいちいちいちごきぶん";
console.log(array.startsWith("ごご"));// =>true
console.log(array.startsWith("いち"));// =>false
console.log(array.endsWith("きぶん"));// =>true
console.log(array.includes("あおい"));// =>false
```
c. 正規表現による検索
(1) 正規表現リテラルを用いる
main関数に関わらず、エラーには例外が発生する。
(2) RegExpコンストラクタを用いる
main関数の呼び出しまでは、エラーによる例外を生じない。
```javascript=
const pattern = /a+/;// aを1回以上繰り返し
const pattern = new RegExp("a+");// aを1回以上繰り返し
console.log(array.endsWith("きぶん"));// =>true
console.log(array.includes("あおい"));// =>false
```
(3)正規表現とマッチした文字列の取得(match)
* 基本的には最初にマッチした結果のみを返す。
* gフラグをつけるとすべてのマッチ結果を返す。
* match allメソッドを使うと、文字列ごとにすべてのマッチ結果が表示される。＜ES2020以降対応＞
* 正規表現中に()で囲むと、一部分のみを取り出すことができる。
```javascript=
const str = "ABC あいう DE えお";
const alphabetsPattern = /[a-zA-Z]+/;
// gフラグなしでは、最初の結果のみを含んだ特殊な配列を返す
const results = str.match(alphabetsPattern);
console.log(results.length); // => 1
// マッチした文字列はインデックスでアクセスできる
console.log(results[0]); // => "ABC"
// マッチした文字列の先頭のインデックス
console.log(results.index); // => 0
// 検索対象となった文字列全体
console.log(results.input); // => "ABC あいう DE えお"
const alphabetsPatternG = /[a-zA-Z]+/g;
// gフラグありでは、全ての検索結果を含む配列を返す
const resultsG = str.match(alphabetsPatternG);
console.log(resultsG.length); // => 2
// マッチした文字列はインデックスでアクセスできる
console.log(resultsG[0]); // => "ABC"
// マッチした文字列の先頭のインデックス
console.log(resultsG.index); // => undefined
// 検索対象となった文字列全体
console.log(resultsG.input); // => undefined
```
### 文字列と正規表現のメリット
* 文字列：文字に起こせるため、内容が分かりやすい。
* 正規表現：曖昧で広範にわたる内容を表現しやすい。
### 文字列の置き換え・削除
文字列.replace(置き換えたい文字列, 置き換える文字列)
```javascript=
const str = "いちご";
str.replace("いちご","ほしみや");
console.log(str);//=>"ほしみや"
str.replace("みや","");
console.log(str);//=>"ほし"
```
### 文字列の組み立て
URL等のコンテキストがある場合、部分に分けて自動的に格納する関数をあらかじめ用意しておくとミスが無くなる。
### タグ付きテンプレート関数
ある文字列に対して特定の形式に変換したデータを埋め込むことができる。
関数 *テンプレートリテラル（バッククォートで囲む）*で表現する。
###### tags: `JavaScript`
Sign in with Wallet
Connect another wallet