📝

テキストの扱い — JavaScript での文字列

2023/04/19に公開

JavaScript

tech

MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）
を参考に勉強するように注意が入ったので、こらを教本にしていきます。
その為、抜粋しながら進めたいと思います。

今回はこちらです。

ブラウザーの開発者ツールってどこやねん！と思ってGitHubを見ていても、
ここに当たるようなコードないなぁと思ってたら・・・。
最終的に「このページに入力出来るよー」って事だと気づきました(笑)

文字列とは

文字列(string)とはテキストを表す連続した文字のことです。
JavaScriptでは、文字列を引用符のダブルクォーテーション（"）またはシングルクォーテーション（'）で囲んで表現します。
文字列(string)とはテキストを表す連続した文字のことです。
プリミティブ値（オブジェクトでなく、メソッドを持たないデータ）の１つで、Stringオブジェクトが文字列プリミティブのラッパーオブジェクト（1つ以上の他の関数を呼び出すための関数）になります。

プリミティブデータ型は7種類あります。
（場合によっては、nullは「プリミティブ」ではありません。）

プリミティブ型	ラッパーオブジェクト	使用例・説明
文字列	String	'文字列' 、"文字列"
数値	Number	1や2
長整数	BigInt	BigInt()
論理値	Boolean	trueかfalse
undefined	✖︎（なし）	`undefined`は宣言のみが行われた変数、又は実引数が存在しない仮引数に自動的に割り当てられる
シンボル	Symbol	Symbol("説明")
null	✖︎（なし）	`null`という値は、存在しないまたは無効

文字列の作成

コンソールに入力する際はconsole.log(●●●);と最後に入力します。
●●●には表示したい内容の文字を入力してください。

1.基本の文字列

このようにコンソールに入力出来ます。
これを見ていて気づいた方もいらっしゃると思いますが、

//間違い
constt string = '革命はテレビでは放送されない';
//正しい
const string = '革命はテレビでは放送されない';

MDNの日本語版のコード記載が間違えています。
正しい方でお試しください。

もし、引用符('',"")で囲わなかったり、どちらか一方を書き忘れるとエラーになります。

const badString = これはテストです';

例えば、上のように入力するとこのようなエラーが出ました。

2.単一引用符と二重引用符

単一引用符（''）と二重引用符("")はどちらを使うかは統一するのをお勧めします。

const sglDbl = 'Would you eat a "fish supper"?';
const dblSgl = "I'm feeling blue.";
console.log(sglDbl);
console.log(dblSgl);

上記の様に使用するのは可能ですが、下記の様に両方の引用符を使用するとエラーが出ます。

また、文字列に囲んでいるのと同じ種類の引用符は使用出来ません。

Uncaught SyntaxError: Unexpected identifier 've'
（日本語→捕まえられない構文エラー：予期しない識別子 've'）

const bigmouth = 'I've got no right to take my place…';
console.log(bigmouth);

3.文字列のエスケープ

先ほどのconst bigmouth = 'I've got no right to take my place…';を直すには問題になっている引用符から脱出する必要があります。
そのためにはその文字がコードではなく、文字列の一部であるとブラウザーに認識させます。
JavaScriptではバックスラッシュ（\）を文字の前に置く事で脱出できます。

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);
//I've got no right to take my place…

4.文字列の連結

JavaScriptで文字列を連結（＝連結）するためにはテンプレートリテラルという異なる形の文字列を使用する事ができます。
テンプレートリテラルはバッククォート (`) で区切られたリテラルで、埋め込み式が利用できます。

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); 
// "Hello, how are you?"

${}文字の中に変数を記述する事が出来、その変数の値が結果に挿入されます。
上記は２つの変数を結合した形です。

5."+"を用いた結合

const greeting = "Hello";
const name = "Chris";
console.log(greeting + ", " + name); 
// "Hello, Chris"

"+"を用いて上記の様に使用できますが、下記の様にテンプレートリテラルを使用した方が、より読み取り可能なコードが得られます。

const greeting = "Hello";
const name = "Chris";
console.log(`${greeting}, ${name}`); 
// "Hello, Chris"

6.数値と文字列

文字列と数字を組み合わせても普通に動作します。
これは数値を文字列に変換し、２つの文字列として結合しているからです。

const name = "フロント ";
const number = 242;
console.log(`${name}${number}`); 
// "フロント 242"

文字列に変換したいがそれ以外は変更しない数値変数、数値に変換したいがそれ以外は変更しない文字列変数は以下の構文を使用することができます。

-文字列に変換したいがそれ以外は変更しない数値変数
Number()：すべてを数値に変換

const myString = "123";
const myNum = Number(myString);
console.log(typeof myNum);
//number

数値に変換したいがそれ以外は変更しない文字列変数
toString()：文字列に変換する

const myNum2 = 123;
const myString2 = myNum2.toString();
console.log(typeof myString2);
//string

7.文字列内に式を含める

JavaScript の式をテンプレートリテラルに含めることができ、その結果も結果に含まれます。

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. 
 I gave it a score of ${(score / highestScore) * 100}%.`;
console.log(output);
// "I like the song Fight the Youth. I gave it a score of 90%."

8.複数行の文字列

テンプレートリテラルは、ソースコードの改行を尊重するので、複数行にまたがる文字列を書くこともできます。

const output = `I like the song.
I gave it a score of 90%.`;
console.log(output);
/*
I like the song.
I gave it a score of 90%.
*/

通常の文字列を使用して同等の出力をするためには、下記の様に文字列の中に改行文字（\n）を記載する必要があります。

const output = "I like the song.\nI gave it a score of 90%.";
console.log(output);
/*
I like the song.
I gave it a score of 90%.
*/

文献表

MDN『テキストの扱い — JavaScript での文字列』
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings (2023年4月19日閲覧)