JavaScript文字列操作（結合、置換、切り出し、検索）まとめ

文字列の長さを取得

const str="あいうえお";
console.log(str.length); //5

前後の空白を削除

const str="  あいうえお  ";
console.log(str.trim()); //あいうえお

配列として扱う

const str="あいうえお";
console.log(str[1]); //い

文字列検索

const str="あいうえお";
console.log(str.indexOf("う")); //2

テンプレートリテラル

//文字列をバッククオート（`テキスト`）で囲む
const num=1;
//変数、計算式を入れられる、改行も可
const str=`あいう
えお${num + 1}`;

console.log(str); 
//あいう
//えお2

文字列結合

const str1="あいうえお";
const str2="かきくけこ";
console.log(str1 +　"," + str2); 
//あいうえお,かきくけこ
console.log(`${str1},${str2}`); 
//あいうえお.かきくけこ
console.log([str1,str2].join(','));
//あいうえお.かきくけこ

大文字・小文字変換

const str="AiuEo";
console.log(str.toUpperCase()); //AIUEO
console.log(str.toLowerCase()); //aiueo

文字列を数値に。数値を文字列に

//文字列を数値にする
const str1="12345";
const num1=Number(str1);
console.log(typeof num1) //number
//数値を文字列にする
const num2=12345;
const str2=String(num2);
console.log(typeof str2) //string

切り出し

const str="あいうえお";
//引数に［開始位置,終了位置（省略可）］を指定
console.log(str.slice(1,3)); //いう
console.log(str.substring(1,3)); //いう
console.log(str.slice(4)); //えお
console.log(str.substring(4)); //えお
//「-」はsliceは末尾から数え、substringは0に変換
console.log(str.slice(-2)); //えお
console.log(str.substring(-2)); //あいうえお
console.log(str.slice(1,-2)); //いう
console.log(str.substring(1,-2)); //あ

※類似メソッドの「substr」は現在、非推奨

置換

const str="aaabbbccc";

console.log(str.replace("a","z"));
//zaabbbccc

//正規表現
console.log(str.replace(/a/g,"z")); 
//zzzbbbccc

//replaceAll ES2021で追加
console.log(str.replaceAll("a","z")); 
//zzzbbbccc

検索

const str="あいうえおあいうえお";

//前方検索
console.log(str.indexOf("う")); //2
//後方検索
console.log(str.lastIndexOf("う")); //7
//ES6で追加
console.log(str.includes("う")); //true
//文字または正規表現どちらも指定可能
console.log(str.search("う")); //2
//正規表現のみ指定可。返り値は配列データ
console.log(str.match(/う/g)); 
//['う', 'う']

文字の埋め込み

const s1="5";
//引数の長さまで指定文字で埋める。
console.log(s1.padStart(4,"0")); //0005
console.log(s1.padEnd(4,"0")); //5000
//文字を省略した場合は空白で埋める
console.log(s1.padStart(4));     //   5
console.log(s1.padEnd(4));     //5

const s2="5432";
console.log(s2.padStart(4,"0")); //5432
console.log(s2.padEnd(4,"0"));   //5432