- JavaScriptの文字列について知りたい
この記事はそんな方へ向けて書いています。
この記事でわかること
- JavaScriptの文字列の概要
- JavaScriptの文字列の連結・結合
本記事の信頼性
- 2021年6月からWebデザインの職業訓練校で学習中（6ヶ月コース）
- 使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」
- ブログ歴：2019年1月にWordPressでブログ開設（月間最高62,000PV、52,000円）
本記事では、職業訓練校で学んだJavaScriptについてまとめました。
この記事を読むことで、JavaScriptの文字列の基礎理解ができます。
JavaScriptの基礎部分です。
Contents
JavaScriptの文字列の概要
文字列の概要
文字のことです。
'（シングルクォート）もしくは" （ダブルクォート）でくくり、記述します。
実際に記述してみます。
index.html
<script>
const mozi = 'おはようございます。'; //半角セミコロン、全角にならないように注意
const sukinamozi = 'ヤッホー';
console.log(mozi);
console.log(sukinamozi);
</script>
変数moziを作成して、文字列「おはようございます」を代入。
変数sukinamoziを作成して、文字列「ヤッホー」を代入。
なお変数名はなんでもOK、記号はNG。
それぞれの変数を開発者ツールに出力してみます。
おはようございます。
ヤッホー
変数名のつけ方のルールは、以下です。
h
- 1文字目はアルファベットかアンダースコア（_）、ドル記号（$）
- 2文字目以降は、上記に加えて数字も使える
- 大文字、小文字は利用できるが区別されるので「blog」と「Blog」は別の変数になる
※注意点：日本語などは使用できない
シングルクォート、ダブルクォート
パラメータ前後のクォーテーション記号は、シングルクォート、ダブルクォートのどちらも利用できます。
たとえば、以下の出力結果はどちらも「斉藤さん、こんにちは」です。
index.html
console.log('斉藤さん、こんにちは');
console.log("斉藤さん、こんにちは");
//出力結果：斉藤さん、こんにちは
シングルクォート、ダブルクォート、どちらを使用してもOKです。
ひとつ注意点があります。
「クォテーション記号の中で、同じ記号を使わない」です。
たとえば、以下はエラーです。
index.html
console.log('斉藤さん、こんにちは。'佐藤さん、こんにちは' ');
//出力結果：シングルクォートの中にシングルクォートでエラー
ただし、記号が異なる場合は利用できます。
index.html
console.log('斉藤さん、こんにちは。 ''佐藤さん、こんにちは" ');
//出力結果：斉藤さん、こんにちは。 "佐藤さん、こんにちは"
「シングルクォートで始まり、ダブルクォートで閉じる」はエラーです。
JavaScriptの文字列の連結・結合
加算演算子＋で連結
文字列は、加算演算子「＋」記号で連結できます。
以下などの文字列も連結できます。
- 変数に代入された文字列
- 3つ以上の文字列など
具体例
console.log('伊藤さん' + 'こんにちは');
//出力結果：伊藤さんこんにちは
const kei = 'さん';
console.log('佐藤' + kei + 'おはようございます。');
//出力結果：佐藤さんおはようございます。
実際にHTMLに書いてみます。
index.html
<script>
console.log('吉田さん' + 'ありがとう');
const kei = 'さん';
const aisatsu = 'おやすみなさい'
console.log('吉田' + kei + aisatsu);
console.log('吉田' + kei + '、' + aisatsu + '。');
</script>
【解説】
文字列「吉田さん」と文字列「ありがとう」を＋で連結させ、開発者ツールに「吉田さんありがとう」を出力。
変数keiをつくり、文字列「さん」を代入。
変数aisatsuをつくり、文字列「おやすみなさい」を代入。
文字列「吉田」、変数kei＝さん、文字列「おやすみなさい」を連結させ、開発者ツールに出力。
文字列「吉田」、変数kei＝さん、文字列「、」、文字列「おやすみなさい」、文字列「」を連結させ、開発者ツールに出力。
出力結果です。
吉田さんおやすみなさい
吉田さん、おやすみなさい。
ダブルクォートを含む文字列の連結
HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります
通常の文字に比べると、少しわかりにくいので注意です。
記述例
index.html
<script>
const css_file = 'style.css'
console.log('<link rel="stylesheet" href="' + css_file + '">');
</script>
【解説】
変数css_fileをつくり、文字列「style.css」を代入。
linkタグの文字列「<link rel="stylesheet" href="」と、変数css_file＝「style.css」、文字列「">」を結合して開発者ツールに出力。
出力結果です。
<link rel="stylesheet" href="style.css">
評価の順番に注意する文字列の結合
index.html
console.log( ' 100+30の結果は、'+100+30+' です ' );
出力結果です。
100+30の結果は、10030です
計算が間違っています。
理由はプログラムの処理の順番が、以下のようになるからです。
- 文字列「100+30の結果は、」と100が連結。
出力結果は「100+30の結果は、100」 - 文字列「100+30の結果は、100」と30が連結。
出力結果は「100+30の結果は、10030」 - 文字列「100+30の結果は、10030」と文字列「です」が連結。
出力結果は「100+30の結果は、10030です」
②の時点で100は数字ではなく文字列になっているので、加算されないのです。
解決策は、100＋30を( )でくくることですね。
JavaScriptはプログラムの内容を理解して、なんらかの処理を実行しようとします。
プログラム用語で「評価」といいます。
色々な文字列の扱い方【バッククォート】
「`」（バッククォート）で括られた文字列では、${変数名}で文字列を結合できます。
その他の特徴として「`」を使うと、その中の改行が有効化します。
たとえば、以下です。
const kei = 'さん';
console.log(`こんにちは、鈴木${kei}`);
//出力結果：こんにちは、鈴木さん
const kana = `あいうえお
かきくけこ
さしすせそ`;
console.log(kana);
//出力結果：あいうえお
かきくけこ
さしすせそ
HTMLに記述します。
index.html
<script>
const kei = 'さん';
console.log(`こんにちは、吉野${kei}`);
const kana = `あいうえお
かきくけこ
さしすせそ`;
console.log(kana);
</script>
【解説】
変数keiを定義し、文字列「さん」を代入
`（バッククォート）で文字列を括り、その中に${変数名}で文字列を連結、開発者ツールに出力。
変数kanaを定義し、文字列をバッククォートで代入。
あいうえお、かきくけこ、さしすせそで、それぞれ改行する。
その際、半角スペースを文字として認識してしまうので、インデント用（字下げ）のスペースは消す。
開発者ツールに変数kanaを出力。
出力結果です。
こんにちは、吉野さん
あいうえお
かきくけこ
さしすせそ
まとめ：JavaScriptの基礎・文字列をマスターしよう
職業訓練校で学んだ「JavaScriptの文字列」は以上です。
文字列は、簡単そうなのでわかったつもりになりやすいです。
あとで復習したら意外と「あれ、なんだっけ」になりました。
その場では理解できても、アウトプットするのは難しいものです。
基礎理解が重要ですので、1つひとつ積み重ねていきます。
なおJavaScriptの数値の扱い方については「【JavaScriptの数値】概要から様々な計算例をまとめました」で解説しています。
以上です。
P.S. JavaScriptの文字列をマスターしよう。
関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由