【Javascript】 文字列の使い方 – プログラミング入門

Javascriptでは、文字列を簡単に連結したりという操作が可能です。

文字列を作る

例えば、数値を作るときは50のように普通に数値を入力しました。

文字列の場合、ダブルクォーテーションで囲みます。

let x = "hoge";

これで、hogeという文字列を変数xに代入することができました。

文字列を囲む種類

Javascriptではいくつか文字列の作り方がありますが、その中でよく利用するものを紹介します。

let x = "hoge"; // ダブルクォーテーションで囲む
let y = 'hoge'; // シングルクォーテーションで囲む
let z = `hoge`; // バッククォートで囲む

それぞれの違いを見ていきましょう。

Javascriptでは、ダブルクォーテーションとシングルクォーテーションはほぼ同じで、普通の文字列です。

バッククォートの場合について見てみましょう。

テンプレートリテラル

テンプレートリテラルでは、${varname}という書き方で変数を文字列内に簡単に埋め込むことができます。

let lang = "Javascript";
console.log(`Hello, ${lang} World!`);

Hello, Javascript World!

もしこれを普通の文字列で行うと、"Hello, " + lang + "World!"になります。それでも良いですが、冗長ですよね。

上の例では、それをテンプレートリテラルを用いることで簡単に連結しています。

数値を埋め込むこともできます。

let x = 10;
let y = 20;

console.log(`x is ${x}, y is ${y}, x + y = ${x + y}`);

x is 10, y is 20, x + y = 30

このように、${}内で計算することもできます。

改行

文字列を改行したい場合、普通の文字列であれば後述する特殊文字が必要になります。

テンプレートリテラルの場合、そのまま改行できます。

let x = `hoge1
hoge2
hoge3`;

console.log(x);

hoge1
hoge2
hoge3

文字列の連結

+を用いることで連結可能です。

let s1 = "Hello, ";
let s2 = "World!!";
console.log(s1 + s2);

console.log(s1 + "Javascript " + s2);

Hello, World!!
Hello, Javascript World!!

数値と文字列の連結

文字列の連結と同じく、+を用いますが、数値を足した結果を連結したい場合は括弧が必要です。

let x = 10;
let s1 = "hogehoge";

console.log(s1 + x);
console.log(s1 + (x + 30) + "fugafuga");

hogehoge10
hogehoge40fugafuga

それ以外の操作に関しては、下のページを確認してください。

【Javascript】 文字列と関連のメソッド

Javascriptでの文字列は、最初から様々な操作ができるようになっています。切り取り、文字列内への変数の埋め込み、文字列以外との連結などが気…

特殊文字

Javascriptでは、文字列に特殊文字というものがあり、それを用いて改行やタブ文字挿入などを行います。

console.log("hoge\nfuga\n\nhige");
console.log("\"\'\`");

hoge
fuga

hige
"'`

まとめ

Javascriptの文字列は、ダブルクォーテーションで囲む、シングルクォーテーションで囲む、バッククォートで囲むの3種類で作ることができます。

文字列の連結は+で可能で、テンプレートリテラルを利用すると文字列に変数の値を楽に埋め込めます。

文字列の比較に関してはここを参照してください。

【Javascript】 ifと比較演算子

Javascriptにおけるifは、動的型付け言語特有の`"0" == 0`が`true`になるなどの厄介なポイントがあります。それを回避するた…

この内容の理解度チェックはこちら

【Javascript】 文字列の使い方の基本 理解度チェック

この内容のテキストはこちら 問1 文字列を作る 変数`s`に`hoge`という文字列を代入してください。 文字列を作るには、ダブルクォーテーショ…