【TypeScript】文字列操作の初心者向け詳細ガイド10選！

はじめに
●TypeScriptでの文字列操作の基本
- ○基本的な文字列の定義方法
- ○文字列の連結方法
●TypeScriptでの文字列の検索と切り出し
- ○サンプルコード1：indexOfを用いた文字の位置検索
- ○サンプルコード2：sliceを使った文字列の切り出し
●文字列の置換と変換
- ○サンプルコード3：replaceを用いた文字列の置換
- ○サンプルコード4：toUpperCaseとtoLowerCaseの使い方
●文字列の分割と結合
- ○サンプルコード5：splitを使った文字列の分割
- ○サンプルコード6：joinを使った文字列の結合
●文字列の長さと特定の文字の取得
- ○サンプルコード7：lengthプロパティの使い方
- ○サンプルコード8：charAtを用いた特定位置の文字取得
●TypeScriptでの文字列操作の応用例
- ○サンプルコード9：テンプレートリテラルを使った高度な文字列操作
- ○サンプルコード10：正規表現を使った文字列の検索と置換
●注意点と対処法
- ○Unicodeとの関連性
- ○エスケープシーケンスの注意点
●文字列操作のカスタマイズ方法
- ○カスタム関数の作成例
- ○ライブラリを使った拡張方法
まとめ

はじめに

TypeScriptは、近年注目を浴びているJavaScriptのスーパーセットとして知られる言語です。

そのため、TypeScriptを理解するためには、JavaScriptの知識があると非常に役立ちます。

特に、文字列操作はどの言語においても基本中の基本となるため、しっかりと理解しておくことが重要です。

今回の記事では、TypeScriptでの文字列操作を初心者向けに徹底解説していきます。

文字列操作は、プログラミングにおいて頻繁に使用されるため、日常の開発作業での生産性を向上させる意味でも、その知識を深めることが推奨されます。

この記事では、基本的な文字列の定義方法から応用的な内容まで、初心者の方がつまづきやすいポイントを中心に、サンプルコードを交えて詳細に解説していきます。

●TypeScriptでの文字列操作の基本

TypeScriptは、JavaScriptに静的型付けの特性を追加した言語として人気を博しています。

文字列操作も、もちろんその重要な部分です。

TypeScriptでの文字列操作は、JavaScriptのそれと非常に似ていますが、静的型付けの恩恵を受けることができる点が異なります。

ここでは、TypeScriptでの文字列操作の基本的な方法を取り上げます。

○基本的な文字列の定義方法

文字列はダブルクオート(“”)やシングルクオート(”)、バッククォート(“)を使用して定義します。

このうち、バッククォートはテンプレートリテラルとしても知られ、変数や式の埋め込みが可能です。

let str1: string = "こんにちは、TypeScript";
let str2: string = 'こんにちは、TypeScript';
let name: string = "Taro";
let str3: string = `私の名前は${name}です`;

このコードでは、3種類のクオートを使用して文字列を定義しています。

特にバッククォートを使用したstr3では、${name}という形で変数を文字列に埋め込んでいます。

上のコードを実行すると、str3の中身は「私の名前はTaroです」となります。

○文字列の連結方法

文字列の連結は、+ 演算子を使用することで簡単に行うことができます。

let firstName: string = "Taro";
let lastName: string = "Yamada";
let fullName: string = firstName + " " + lastName;

このコードでは、firstNameとlastNameを連結して、フルネームを作成しています。

コードを実行した際、fullNameの内容は「Taro Yamada」となります。

しかし、連結の際には注意も必要です。

型が違う変数を連結する場合、エラーとなることがあります。例えば、文字列と数値を直接連結しようとするとエラーが発生します。

その際は、数値を文字列に変換してから連結する必要があります。

let age: number = 20;
let str: string = "私は" + age.toString() + "歳です";

このコードでは、ageという数値をtoString()メソッドで文字列に変換してから、他の文字列と連結しています。

コードを動かすと、strの中身は「私は20歳です」と表示されます。

●TypeScriptでの文字列の検索と切り出し

文字列の中から特定の文字や部分文字列の位置を知りたいときや、文字列から特定の部分を切り出したいときはどうすれば良いのでしょうか。

TypeScriptでは、JavaScriptと同じく、様々な文字列メソッドを提供しています。

ここでは、その中から「indexOf」を用いた文字の位置検索と「slice」を使った文字列の切り出しについて詳しく見ていきましょう。

○サンプルコード1：indexOfを用いた文字の位置検索

文字列の中で特定の文字や部分文字列の最初の出現位置を検索するには、indexOfメソッドを使用します。

このコードではindexOfを使って文字列内での指定した部分文字列の位置を検索するコードを表しています。

この例では”こんにちは、世界！”という文字列の中から”世界”という部分文字列の位置を検索しています。

const str: string = "こんにちは、世界！";
const position: number = str.indexOf("世界");
console.log(position);

このコードを実行すると、”世界”という部分文字列が”こんにちは、”の後に来るため、出力される位置は7になります。

しかし、もし検索した部分文字列が元の文字列に含まれていない場合、indexOfメソッドは-1を返します。

この挙動は、部分文字列の存在をチェックする際にも利用されます。

例えば、次のようなコードでは、”こんにちは、世界！”という文字列の中に”こんにちは”という部分文字列が含まれているかをチェックしています。

const str: string = "こんにちは、世界！";
if (str.indexOf("こんにちは") !== -1) {
    console.log("「こんにちは」が文字列の中に存在します。");
} else {
    console.log("「こんにちは」は文字列の中に存在しません。");
}

このコードを実行すると、”「こんにちは」が文字列の中に存在します。”という結果が得られます。

○サンプルコード2：sliceを使った文字列の切り出し

文字列から特定の部分を取り出す操作は、プログラミングにおいて頻繁に行われます。

このコードでは、sliceメソッドを使って文字列から一部を切り出す方法を表しています。

この例では、指定した開始位置から終了位置までの部分文字列を取り出しています。

// TypeScriptのサンプルコード
const str: string = "TypeScriptは素晴らしい！";
const result: string = str.slice(0, 10);
console.log(result);

このサンプルコードでは、文字列"TypeScriptは素晴らしい！"の0文字目から9文字目までを切り出しています。

sliceメソッドの第1引数が開始位置、第2引数が終了位置となります。

終了位置は含まれない点に注意してください。

このサンプルコードを実行すると、結果として"TypeScript"という文字列が表示されます。

さらに、sliceメソッドは第2引数を省略すると、開始位置から文字列の最後までを切り出します。

const result2: string = str.slice(10);
console.log(result2);

この例では、10文字目から最後までの部分文字列を取り出しています。

このコードを実行すると、"は素晴らしい！"という文字列が表示されます。

●文字列の置換と変換

文字列は、プログラム内での情報伝達やユーザーとのインタラクションにおいて、非常に重要な役割を果たします。

そのため、文字列を効果的に操作する技術は、TypeScriptを学ぶ上で欠かせないスキルの一つとなります。

ここでは、TypeScriptを用いた文字列の置換と変換に関する操作を、具体的なサンプルコードを交えて詳細に解説していきます。

○サンプルコード3：replaceを用いた文字列の置換

このコードでは、replaceメソッドを使って文字列内の特定の部分を別の文字列に置き換える方法を表しています。

この例では、”Hello, World!”の”World”を”TypeScript”に置き換えています。

let greeting = "Hello, World!";
let modifiedGreeting = greeting.replace("World", "TypeScript");
console.log(modifiedGreeting);

このコードを実行すると、コンソール上に”Hello, TypeScript!”という文字列が表示されることになります。

replaceメソッドは、指定した最初の文字列を第二の文字列に置き換える機能を持っています。

ただし、この方法では最初にマッチした文字列のみが置き換えられる点に注意が必要です。

例えば、次のように同じ文字列が複数回出現する場合、

let repeatedString = "apple apple apple";
let modifiedString = repeatedString.replace("apple", "orange");
console.log(modifiedString);

このコードを実行すると、結果は”orange apple apple”となり、最初の”apple”のみが”orange”に置き換えられていることがわかります。

すべての”apple”を置き換えたい場合は、正規表現を使用することで実現できますが、その詳細は後に触れることにします。

○サンプルコード4：toUpperCaseとtoLowerCaseの使い方

このコードでは、toUpperCaseとtoLowerCaseメソッドを使って、文字列を大文字と小文字に変換する方法を表しています。

この例では、”TypeScript”という文字列を大文字および小文字に変換しています。

let originalString = "TypeScript";
let upperCaseString = originalString.toUpperCase();
let lowerCaseString = originalString.toLowerCase();

console.log(upperCaseString);  // 出力は "TYPESCRIPT"
console.log(lowerCaseString);  // 出力は "typescript"

toUpperCaseメソッドは文字列のすべての文字を大文字に、toLowerCaseメソッドはすべての文字を小文字に変換します。

これらのメソッドは、例えばユーザー入力の正規化や、テキストの検索・マッチング時にケースを無視したい場合などに有用です。

●文字列の分割と結合

文字列の操作において、分割や結合は非常によく利用される操作です。

これらの操作を理解し、適切に使用することで、プログラミングにおける幅広いタスクを効率的にこなすことができます。

○サンプルコード5：splitを使った文字列の分割

TypeScriptでは、splitメソッドを使用することで、文字列を特定の区切り文字で分割し、それを元に新しい文字列の配列を生成することができます。

このコードでは、カンマ,を使って文字列を分割するコードを紹介しています。

この例では、"apple,orange,grape"という文字列を,で分割して、それぞれの果物名を配列の要素として取り出しています。

// 文字列を定義
const fruits: string = "apple,orange,grape";

// splitメソッドでカンマを基に文字列を分割
const fruitArray: string[] = fruits.split(",");

// 結果を表示
console.log(fruitArray);

上記のコードを実行すると、コンソールには次のような出力がされます。

出力結果は文字列の配列として["apple", "orange", "grape"]となります。

○サンプルコード6：joinを使った文字列の結合

一方、joinメソッドを使用することで、文字列の配列を特定の区切り文字で結合し、一つの文字列として生成することができます。

このコードでは、["apple", "orange", "grape"]という文字列の配列を、-を使って結合するコードを表しています。

この例では、それぞれの果物名を-で結合して、新しい文字列を生成しています。

// 文字列の配列を定義
const fruitArray: string[] = ["apple", "orange", "grape"];

// joinメソッドでハイフンを基に文字列を結合
const fruits: string = fruitArray.join("-");

// 結果を表示
console.log(fruits);

上記のコードを実行すると、コンソールには次のような出力がされます。

出力結果は一つの文字列として"apple-orange-grape"となります。

●文字列の長さと特定の文字の取得

○サンプルコード7：lengthプロパティの使い方

文字列の長さを取得する場面は、プログラミングの中で頻繁に出てきます。

例えば、ユーザから入力された文字列が、一定の長さを超えているかどうかをチェックする際などに使用されます。

このような場合、TypeScriptのlengthプロパティを使用することで、簡単に文字列の長さを取得することができます。

下記のコードでは、文字列”Hello TypeScript!”の長さを取得しています。

const str = "Hello TypeScript!";
const len = str.length;

console.log(`文字列"${str}"の長さは${len}文字です。`);

このコードではHello TypeScript!という文字列を変数strに代入しています。

次に、lengthプロパティを使って、この文字列の長さを変数lenに格納しています。

最後に、その結果をコンソールに表示しています。

この例を実行すると、次のような結果が得られます。

文字列”Hello TypeScript!”の長さは17文字です。

つまり、Hello TypeScript!という文字列は17文字から構成されていることがわかります。

このように、lengthプロパティは文字列の長さを取得する際に非常に便利なプロパティと言えるでしょう。

なお、lengthプロパティは読み取り専用のプロパティです。

従って、このプロパティの値を変更することはできません。

例えば、次のようなコードを書くとエラーが発生します。

const str = "Hello";
str.length = 10;  // エラー！lengthプロパティは読み取り専用です。

このように、lengthプロパティを使って文字列の長さを取得する際は、このプロパティが読み取り専用であることを念頭に置いておくことが重要です。

○サンプルコード8：charAtを用いた特定位置の文字取得

このコードでは、charAtメソッドを使って、指定された位置にある文字を取得する方法を表しています。

この例では、文字列中の特定の位置を指定して、その位置の文字を取得しています。

const sampleString: string = "TypeScript";
const position: number = 4;
const character: string = sampleString.charAt(position);

// コメント: 指定した位置の文字をコンソールに表示
console.log(`文字列"${sampleString}"の${position + 1}番目の文字は"${character}"です。`);

この例の場合、変数sampleStringには”TypeScript”という文字列が代入されています。

そして、positionという変数には4という数字が代入されているので、この数字を基にしてcharAtメソッドを使って文字列から5番目の文字を取得します。

その結果、変数characterには5番目の文字である”S”が代入されます。

最後のconsole.log関数を使って、取得した結果をコンソールに表示します。

このコードを実行すると、「文字列”TypeScript”の5番目の文字は”S”です。」というメッセージが表示されます。

ちなみに、もし指定した位置に文字が存在しない場合、charAtメソッドは空の文字列を返します。

この特性を利用して、文字列の範囲外の位置を指定してもエラーが発生しないように設計されています。

●TypeScriptでの文字列操作の応用例

TypeScriptでの文字列操作には多くの方法がありますが、基本的な操作方法を理解した上で、さらに高度な操作を理解したいと考える方も多いでしょう。

ここでは、TypeScriptの文字列操作の応用例を2つ紹介します。

○サンプルコード9：テンプレートリテラルを使った高度な文字列操作

テンプレートリテラルはES6から導入された機能で、TypeScriptでも利用することができます。

テンプレートリテラルを使うと、文字列内に変数を埋め込んだり、複数行にわたる文字列を簡単に作成することができます。

このコードでは、テンプレートリテラルを使って変数を文字列内に埋め込んで表示しています。

この例では、変数nameとageをテンプレートリテラル内に埋め込み、メッセージを生成しています。

const name = "山田";
const age = 30;

const message = `こんにちは、${name}さん。あなたは${age}歳ですね。`;
console.log(message);

このコードを実行すると、コンソールに「こんにちは、山田さん。あなたは30歳ですね。」と表示されます。

テンプレートリテラルはバッククォート（`）を使用して囲み、${}の中に変数を埋め込むことができます。

また、テンプレートリテラルを使えば、次のように複数行にわたる文字列も簡単に作成できます。

const multiLineMessage = `
こんにちは、${name}さん。
あなたは${age}歳ですね。
`;
console.log(multiLineMessage);

上記のコードを実行すると、コンソールに次のようなメッセージが表示されます。

こんにちは、山田さん。
あなたは30歳ですね。

テンプレートリテラルは、文字列の中に変数や式を埋め込む際に非常に便利です。

また、複数行の文字列を扱う際にも役立ちます。

○サンプルコード10：正規表現を使った文字列の検索と置換

正規表現は、文字列の中から特定のパターンを持つ部分を検索したり、置き換えたりする際に非常に強力なツールとして知られています。

TypeScriptもJavaScriptの上に構築されているため、正規表現の使用方法はJavaScriptと基本的に同じです。

このコードでは、正規表現を使って文字列の中から特定のパターンを検索し、置き換える方法を表しています。

この例では、文字列中の数字を検索し、それを”**”で囲んで強調しています。

// TypeScriptのサンプルコード
const text: string = "私は2023年8月に東京へ行きます。";

// 正規表現で数字を検索するパターンを定義
const regExp: RegExp = /\d+/g;

// text中の数字を"**数字**"の形に置き換える
const replacedText: string = text.replace(regExp, (match) => {
    return `**${match}**`;
});

console.log(replacedText);

このコードを実行すると、”私は2023年8月に東京へ行きます。”という文字列が出力されます。

数字が”**”で囲まれて強調されているのがわかると思います。

しかし、正規表現は非常に多機能であり、様々なパターンを検索することができます。

例えば、次のように特定の文字列だけを抽出することも可能です。

const text2: string = "apple, banana, cherry, date, fig";
const fruitRegExp: RegExp = /apple|banana|cherry/g;
const matchedFruits: string[] = Array.from(text2.matchAll(fruitRegExp), m => m[0]);

console.log(matchedFruits);  // ["apple", "banana", "cherry"]のように出力されます。

このコードは、文字列中から”apple”, “banana”, “cherry”の3つのフルーツ名を検索して抽出しています。

正規表現を使用するときの注意点として、特定のメタ文字（例：”.”, “*”, “+”など）はエスケープする必要があります。

このエスケープには”\”（バックスラッシュ）を使用します。例えば、”.”を文字として検索する場合は”\.”と書きます。

●注意点と対処法

文字列操作をTypeScriptで行う際には、特定の注意点や対処法を理解しておくことが必要です。

特に、文字列の扱いに関する基本的な知識が不足していると、思わぬバグや問題が生じることがあります。

○Unicodeとの関連性

このコードではUnicodeと文字列操作の関連性について表しています。

TypeScriptでは、文字列は内部的にUTF-16でエンコードされています。

そのため、サロゲートペア（2つの16ビット値から成る文字のペア）を含む文字列の場合、文字数のカウントや文字の取得に注意が必要です。

例えば、絵文字や一部の特殊文字はサロゲートペアとして扱われます。

const str = "𩸽";  // この文字はサロゲートペアです。
console.log(str.length);  // 2

この例では、𩸽という文字がサロゲートペアとして2文字としてカウントされてしまいます。

上記のコードでは、𩸽という文字がサロゲートペアとして2文字としてカウントされてしまうことを表しています。

対処法として、サロゲートペアを考慮した文字数をカウントするライブラリを使用するか、Array.from()メソッドを使用して文字列を配列に変換し、lengthプロパティを使用してカウントすることができます。

○エスケープシーケンスの注意点

このコードでは、エスケープシーケンスに関する注意点を表しています。

TypeScriptでは、\を使ったエスケープシーケンスをサポートしています。

例えば、\"や\\などです。しかし、これらのエスケープシーケンスを正しく理解しないと、予期しない文字列操作の結果が得られることがあります。

const exampleString = "これは\"ダブルクォート\"の例です。";
console.log(exampleString);  // これは"ダブルクォート"の例です。

この例では、エスケープシーケンスを使用してダブルクォートを文字列内で表示しています。

上記のコードでは、エスケープシーケンスを使ってダブルクォートを文字列内に表示する方法を示しています。

エスケープシーケンスを使用する際は、意図した通りの結果が得られるか確認することが重要です。

特に正規表現やテンプレートリテラル内でのエスケープは注意が必要です。

●文字列操作のカスタマイズ方法

文字列操作をカスタマイズすることで、特定のシチュエーションに合わせた処理を迅速に実行することが可能になります。

TypeScriptにはそのための豊富な機能が備わっていますが、ここではカスタム関数の作成と、外部ライブラリを利用した拡張方法について詳しく説明していきます。

○カスタム関数の作成例

TypeScriptを使用して、特定の文字列操作を行うカスタム関数を作成することは比較的簡単です。

指定された文字数だけ文字列の中央を取り出す関数のサンプルコードを紹介します。

// 文字列の中央から指定された文字数を取り出す関数
function 中央文字取得(str: string, length: number): string {
    const start = Math.floor((str.length - length) / 2);
    return str.slice(start, start + length);
}

// コメント：使用例
const 結果 = 中央文字取得("TypeScript学習", 5);
console.log(結果);

このコードでは、中央文字取得関数を使用して、文字列”TypeScript学習”から中央の5文字を取り出しています。

この例では、”Script”という部分が取り出されます。

○ライブラリを使った拡張方法

外部ライブラリを使用することで、さらに高度な文字列操作が可能となります。特に、文字列操作を専門に扱うライブラリは多数存在します。

その中から、非常に人気のあるlodashライブラリの一部を紹介します。

まず、lodashをプロジェクトに追加する方法です。

Node.jsのnpmやyarnを使用してインストールできます。

npm install lodash
// または
yarn add lodash

次に、lodashの中のtruncate関数を利用した例を紹介します。

この関数は、文字列を指定した長さに切り詰め、それを超える部分は省略記号(デフォルトで”…”)で置き換える機能があります。

import { truncate } from 'lodash';

const 長い文章 = "TypeScriptはJavaScriptに静的型付けの機能を追加した言語です。";
const 短縮文章 = truncate(長い文章, { 'length': 20 });
console.log(短縮文章);

上記のコードを実行すると、”TypeScriptはJavaScri…”という形で20文字に短縮された文字列が出力されます。