JavaScript / TypeScript 文字列操作まとめ

JavaScript（及び TypeScript）の配列操作に関する”技”をまとめました

テンプレートリテラル

文字列への変数埋め込みにはこれを使用します

// 通常の変数同士の連結はこちら
let a = 'Java';
let b = 'Script';
let result = a + b ;
console.log(result); 

// 出力
'JavaScript'


// 文字列への変数埋め込み
let number = 10;
let text = `りんごを${number}個とみかんを${number - 5}個ください`;  // ${}内に計算式をいれてもOK
console.log(text);

// 出力
'りんごを10個とみかんを5個ください'

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

代入したそのままの形が保持されます

const text = `Java
Script
    を書く`;

console.log(text);

// 出力
            Java
Script
    を書く

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

const text = `Java\\Script`;
console.log(text); 

// 出力
Java\Script

配列の文字列を連結：join

const array = [4, 3, 2, 1];

// つなぎ目の文字を指定できる
let strings1 = array.join('');
let strings2 = array.join('---');

console.log(strings1);
console.log(strings2);

// 出力
"4321"
"4--3--2--1"

変数同士の連結

※ 文字列 + 変数の連結はテンプレートリテラルを使用します

let a = 'Java';
let b = 'Script';
let result = a + b ;
console.log(result); 

// 出力
JavaScript

文字列の切り出し：

ここでは、slice() と substring() を紹介します。

slice

slice(開始位置, 終了位置)

const text = '本日も、よろしくお願いします';

// インデックスが4から最後までの文字を切り出し
let result = text.slice(4);
console.log(result);

// 出力
よろしくお願いします


// インデックスが0から3の前までの文字を切り出し
let result2 = text.slice(0, 3);
console.log(result2);

// 出力
本日も


// 開始位置を後ろからの桁数で数えて切り出し（右端のみ切り出せる）
let result3 = text.slice(-7, 5);
console.log(result3); 

// 出力
くお願いし

slice() では、終了位置が開始位置より小さい場合、空の文字列が返されます。

substring

substring(開始位置, 終了位置)

const text = '本日も、よろしくお願いします';

// インデックスが0から3の前までの文字を切り出し
let result = text.substring(0, 3);
console.log(result); 

// 出力
本日も


// 開始位置 > 終了位置 のとき終了位置と開始位置が逆になる
// 以下の例では 開始位置：インデックス8・終了位置：インデックス4 なので、
// インデックスが4から8の前までの文字を切り出す
let result2 = text.substring(8, 4);
console.log(result2); 

// 出力
よろしく

substring() は slice() と異なり、負のパラメータを受け入れません。負の値が渡された場合、0として扱われます。

const text = '本日も、よろしくお願いします';

// 開始位置：8文字目・終了位置：-1 = 0
// 開始位置 > 終了位置となっているため、開始位置と終了位置が逆になる
// つまり、先頭文字から8文字切り出す
let result3 = text.substring(8, -1);
console.log(result3);

// 出力 
本日も、よろしく

分割：split

split(区切り文字)

let years = '2018, 2019, 2020';
// 「,」 カンマ区切りで分割して配列に格納
var result = years.split(','); 

console.log(result); 

// 出力
["2018", " 2019", " 2020"]

置換・削除：replace

replace(置換前の文字列, 置換後の文字列)

let text = '夕食はラーメンとカレーです';
let result = text.replace('カレー', '餃子');
console.log(result); 

// 出力
夕食はラーメンと餃子です


let text = '夕食はラーメンとカレーです';
let result2 = text.replace('とカレー', '');
console.log(result2); 

// 出力
夕食はラーメンです

検索：indexOf

indexOf(検索したい文字列)

検索したい文字列を含む → 最初の文字のインデックスを返す
検索したい文字列を含まない → 1 を返す

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

console.log(result1); 
console.log(result2); 

// 出力
4
-1

トリム：trim

対象の文字列の前後にある空白を削除します。

let greeting = '  おはようございまーす　　　   ';
let result = greeting.trim();
console.log(result); 

// 出力
おはようございまーす

大文字に変換：toUpperCase

let str = 'Chrome';
let result = str.toUpperCase();
console.log(result); 

// 出力
CHROME

小文字に変換：toUpperCase

let str = 'ZENN';
let result = str.toLowerCase();
console.log(result); 

// 出力
zenn

型変換

文字列を数値にする：Number

Number(文字列)

let str = '123';
let result = Number(str);
console.log(result); 

// 出力
123


// typeofで型判定
console.log(typeof result) 

// 出力
number

数値を文字列にする：String

String(数値)

let num = 123;
let result = String(num);
console.log(result); 

// 出力
'123'


// typeofで型判定
console.log(typeof result) 

// 出力
string

文字数をカウント：length

let str = 'あいうえお';
let result = str.length;
console.log(result); 

// 出力
5