ホーム > javascript > JavaScript 文字や文字列

JavaScript 文字や文字列

JavaScriptリファレンス

目次
sec.1
sec.2
sec.3
sec.4
sec.5

JavaScript の文字
JavaScript の文字コード
文字列を作成する
JavaScript のエスケープシーケンス
文字列の操作

JavaScript の文字

'文字列'
"文字列"

JavaScript での文字とは、Unicode（JavaScriptの文字コード）のひらがな、漢字、数字、英字、記号などのことで、これらの文字が0個以上連なった羅列のことを文字列と言います。文字列は、 JavaScript が扱うデータ型の一つで 文字列テキスト のことです。JavaScript が扱うデータ型は Number（数値）やBoolean（真偽値）など複数あり、その中の一つが文字列になります。
ここでは、 JavaScript でどのように文字列を扱うか、その操作方法を紹介します。

JavaScript のデータ型

JavaScript のデータ型は全部で7タイプが定義されています。

プリミティブ型のデータ型が6タイプ
・String（文字列）
・Number（数値）
・Boolean（真偽値）
・null（null値）
・undefined
・Symbol（シンボル）ECMAScript 6 で追加。
オブジェクト型のデータ型が1タイプ

JavaScript の文字コード

JavaScript の文字コードは Unicode文字コードを使用しています。文字コードとは、0や1の2進数しか扱えないコンピューターが文字や記号を扱えるように、個々の文字に割り振られた数字のことです。文字コードは、日本語の文字コードの JIS や Shift-jis、EUC-JP、世界的に普及したASCII、英語や西ヨーロッパの言語をカバーしている ISO Latin-1 など、様々な文字コードがあります。
Unicode は、世界のほぼ全ての言語を表現できる、とされています。7ビットのASCII文字コードや8ビットのISO Latin-1 では対応できない文字も表現可能です。

文字列を作成する

'(シングルクォート) で囲む '文字列'
"(ダブルクォート) で囲む "文字列"

JavaScript で文字列を扱う場合、文字列を「 ' 」シングルクォート（単一引用符）か「 " 」ダブルクォート（二重引用符）で囲います。引用符で囲まれた値は JavaScript から文字列のデータ型として扱われます。文字列のデータを文字列リテラルと言います。どちらで囲んでも意味合いは同じです。コーディングのルール等に従って、好みの引用符を使用しましょう。いずれにしても統一して使用するのが良いでしょう。

文字列を作成

文字列のデータを作成してみましょう。変数 str を宣言して、「JavaScript」という文字列を格納します。「JavaScript」の文字列は「 ' 」シングルクォート（単一引用符）で囲みます。変数 str のデータ型を typeof() で確認すると string と表示されます。これは文字列型を表しています。

JavaScript
ブラウザ
html

//変数を宣言してシングルクォートで囲んだ文字列を格納
var str = 'JavaScript';
document.write(typeof(str));//データ型を確認

//変数を宣言してシングルクォートで囲んだ文字列を格納

var str = 'JavaScript';

document.write(typeof(str));//データ型を確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
//変数を宣言してシングルクォートで囲んだ文字列を格納
var str = 'JavaScript';
document.write(typeof(str));//データ型を確認
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

</head>

<body>

//変数を宣言してシングルクォートで囲んだ文字列を格納

var str = 'JavaScript';

document.write(typeof(str));//データ型を確認

</script>

</body>

</html>

色々な文字列

文字列は、空、数字やアルファベット、ひらがなや漢字など、あらゆる文字を使用することが可能です。

JavaScript
ブラウザ
html

document.write('');//空の文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('abc');//アルファベットの文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('1.414213');//数字の文字列
document.write('<hr/>線');//HTMLタグの文字列

document.write('あいうえお かきくけこ さしすせそ');//ひらがなの文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('亜哀挨愛曖');//漢字文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('');//空の文字列

document.write('<hr/>');//HTMLタグの文字列

document.write('abc');//アルファベットの文字列

document.write('<hr/>');//HTMLタグの文字列

document.write('1.414213');//数字の文字列

document.write('<hr/>線');//HTMLタグの文字列

document.write('あいうえおかきくけこさしすせそ');//ひらがなの文字列

document.write('<hr/>');//HTMLタグの文字列

document.write('亜哀挨愛曖');//漢字文字列

document.write('<hr/>');//HTMLタグの文字列

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
document.write('');//空の文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('abc');//アルファベットの文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('1.414213');//数字の文字列
document.write('<hr/>線');//HTMLタグの文字列

document.write('あいうえお かきくけこ さしすせそ');//ひらがなの文字列
document.write('<hr/>');//HTMLタグの文字列

document.write('亜哀挨愛曖');//漢字文字列
document.write('<hr/>');//HTMLタグの文字列
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

</head>

<body>

document.write('');//空の文字列

document.write('<hr/>');//HTMLタグの文字列

document.write('abc');//アルファベットの文字列

document.write('<hr/>');//HTMLタグの文字列

document.write('1.414213');//数字の文字列

document.write('<hr/>線');//HTMLタグの文字列

document.write('あいうえおかきくけこさしすせそ');//ひらがなの文字列

document.write('<hr/>');//HTMLタグの文字列

document.write('亜哀挨愛曖');//漢字文字列

document.write('<hr/>');//HTMLタグの文字列

</script>

</body>

</html>

囲んでいる引用符は文字列中で使用しない

文字列を囲んでいる引用符を、文字列の中で使用するとエラーが発生します。囲んでいるのと同じ種類の引用符を文字列中で使用してはいけません。

JavaScript
ブラウザ
html

document.write('He said, 'When in Rome, do as the Romans do.'');
document.write("He said, "When in Rome, do as the Romans do."");

1 2	document.write('He said, 'When in Rome, do as the Romans do.''); document.write("He said, "When in Rome, do as the Romans do."");

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
<?php require_once('../../google_analytics.php'); ?>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
document.write('He said, 'When in Rome, do as the Romans do.'');
document.write("He said, "When in Rome, do as the Romans do."");
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

<?php require_once('../../google_analytics.php'); ?>

</head>

<body>

document.write('He said, 'When in Rome, do as the Romans do.'');

document.write("He said, "When in Rome, do as the Romans do."");

</script>

</body>

</html>

文字列中で引用符を使用したい場合は、文字列を囲んでいる引用符とは異なる種類の引用符を使用しましょう。

document.write('He said, "When in Rome, do as the Romans do."');
document.write("He said, 'When in Rome, do as the Romans do.'");

1 2	document.write('He said, "When in Rome, do as the Romans do."'); document.write("He said, 'When in Rome, do as the Romans do.'");

JavaScript のエスケープシーケンス

\ + 特定文字

JavaScript における「\ (バックスラッシュ)」は特別な意味を持ちます。バックスラッシュ(\) + 特定文字で、例えば「改行」などを表したり、特定制御コードを表現することが出来ます。この特定制御コードをエスケープシーケンスと言います。

エスケープシーケンス
エスケープシーケンス	意味
\0	NUL文字
\b	バックスペース
\t	水平タブ
\n	改行
\v	垂直タブ
\r	復帰
\"	ダブルコーテーション
\'	シングルコーテーション
\\	バックスラッシュ

文字列の操作

文字列の結合 +

文字列の結合には「+ (プラス演算子)」を利用します。

JavaScript
ブラウザ
html

//文字列結合
var sMsg = "Hello, " + "world";//変数作成と文字列の結合
document.write(sMsg+'<br>');//文字列の出力
document.write('<hr/>');

//文字列結合
var sName = 'WEPICKS';//変数作成
sGreeting = "Welcome to " + " " + sName + " website!";//変数作成と文字列の結合
document.write(sGreeting+'<br>');//文字列の出力
document.write('<hr/>');

//文字列結合

var sMsg = "Hello, " + "world";//変数作成と文字列の結合

document.write(sMsg+'<br>');//文字列の出力

document.write('<hr/>');

//文字列結合

var sName = 'WEPICKS';//変数作成

sGreeting = "Welcome to " + " " + sName + " website!";//変数作成と文字列の結合

document.write(sGreeting+'<br>');//文字列の出力

document.write('<hr/>');

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
//文字列結合
var sMsg = "Hello, " + "world";//変数作成と文字列の結合
document.write(sMsg+'<br>');//文字列の出力
document.write('<hr/>');

//文字列結合
var sName = 'WEPICKS';//変数作成
sGreeting = "Welcome to " + " " + sName + " website!";//変数作成と文字列の結合
document.write(sGreeting+'<br>');//文字列の出力
document.write('<hr/>');
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

</head>

<body>

//文字列結合

var sMsg = "Hello, " + "world";//変数作成と文字列の結合

document.write(sMsg+'<br>');//文字列の出力

document.write('<hr/>');

//文字列結合

var sName = 'WEPICKS';//変数作成

sGreeting = "Welcome to " + " " + sName + " website!";//変数作成と文字列の結合

document.write(sGreeting+'<br>');//文字列の出力

document.write('<hr/>');

</script>

</body>

</html>

文字列の長さを求める

JavaScript
ブラウザ
html

//文字列を作成
var sString1= 'abcdefghijklmnopqrstuvwxyz';
var sString2 = '123456789';
var sString3 = '0.05478';
var sString4 = 'あいうえお';
var sString5 = 'アイウエオ';
var sString6 = '亜居宇江雄';

//文字列の長さ
document.write(sString1 + '　文字列の長さ　' + sString1.length);
document.write('<hr/>');

document.write(sString2 + '　文字列の長さ　' + sString2.length);
document.write('<hr/>');

document.write(sString3 + '　文字列の長さ　' + sString3.length);
document.write('<hr/>');

document.write(sString4 + '　文字列の長さ　' + sString4.length);
document.write('<hr/>');

document.write(sString5 +'　文字列の長さ　' + sString5.length);
document.write('<hr/>');

document.write(sString6 +'　文字列の長さ　' + sString6.length);
document.write('<hr/>');

//文字列を作成

var sString1= 'abcdefghijklmnopqrstuvwxyz';

var sString2 = '123456789';

var sString3 = '0.05478';

var sString4 = 'あいうえお';

var sString5 = 'アイウエオ';

var sString6 = '亜居宇江雄';

//文字列の長さ

document.write(sString1 + '　文字列の長さ　' + sString1.length);

document.write('<hr/>');

document.write(sString2 + '　文字列の長さ　' + sString2.length);

document.write('<hr/>');

document.write(sString3 + '　文字列の長さ　' + sString3.length);

document.write('<hr/>');

document.write(sString4 + '　文字列の長さ　' + sString4.length);

document.write('<hr/>');

document.write(sString5 +'　文字列の長さ　' + sString5.length);

document.write('<hr/>');

document.write(sString6 +'　文字列の長さ　' + sString6.length);

document.write('<hr/>');

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
//文字列を作成
var sString1= 'abcdefghijklmnopqrstuvwxyz';
var sString2 = '123456789';
var sString3 = '0.05478';
var sString4 = 'あいうえお';
var sString5 = 'アイウエオ';
var sString6 = '亜居宇江雄';

//文字列の長さ
document.write(sString1 + '　文字列の長さ　' + sString1.length);
document.write('<hr/>');

document.write(sString2 + '　文字列の長さ　' + sString2.length);
document.write('<hr/>');

document.write(sString3 + '　文字列の長さ　' + sString3.length);
document.write('<hr/>');

document.write(sString4 + '　文字列の長さ　' + sString4.length);
document.write('<hr/>');

document.write(sString5 +'　文字列の長さ　' + sString5.length);
document.write('<hr/>');

document.write(sString6 +'　文字列の長さ　' + sString6.length);
document.write('<hr/>');
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

</head>

<body>

//文字列を作成

var sString1= 'abcdefghijklmnopqrstuvwxyz';

var sString2 = '123456789';

var sString3 = '0.05478';

var sString4 = 'あいうえお';

var sString5 = 'アイウエオ';

var sString6 = '亜居宇江雄';

//文字列の長さ

document.write(sString1 + '　文字列の長さ　' + sString1.length);

document.write('<hr/>');

document.write(sString2 + '　文字列の長さ　' + sString2.length);

document.write('<hr/>');

document.write(sString3 + '　文字列の長さ　' + sString3.length);

document.write('<hr/>');

document.write(sString4 + '　文字列の長さ　' + sString4.length);

document.write('<hr/>');

document.write(sString5 +'　文字列の長さ　' + sString5.length);

document.write('<hr/>');

document.write(sString6 +'　文字列の長さ　' + sString6.length);

document.write('<hr/>');

</script>

</body>

</html>

最後の文字を求める

JavaScript
ブラウザ
html

//最後の文字を求める
var sString = 'asdfG'
var sLastStr = sString.charAt(sString.length -1);
document.write(sString + '　最後の文字を求める<br>');
document.write(sLastStr + '<br>');
document.write('<hr/>');

//最後の文字を求める

var sString = 'asdfG'

var sLastStr = sString.charAt(sString.length -1);

document.write(sString + '　最後の文字を求める<br>');

document.write(sLastStr + '<br>');

document.write('<hr/>');

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
//最後の文字を求める
var sString = 'asdfG'
var sLastStr = sString.charAt(sString.length -1);
document.write(sString + '　最後の文字を求める<br>');
document.write(sLastStr + '<br>');
document.write('<hr/>');
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

</head>

<body>

//最後の文字を求める

var sString = 'asdfG'

var sLastStr = sString.charAt(sString.length -1);

document.write(sString + '　最後の文字を求める<br>');

document.write(sLastStr + '<br>');

document.write('<hr/>');

</script>

</body>

</html>

2番目から4番目

JavaScript
ブラウザ
html

//2番目から4番目
var sString = 'zxcvnm'
var sSubStr = sString.substring(1,4);
document.write(sString + '　2番目から4番目<br>');
document.write(sSubStr + '<br>');
document.write('<hr/>');

//2番目から4番目

var sString = 'zxcvnm'

var sSubStr = sString.substring(1,4);

document.write(sString + '　2番目から4番目<br>');

document.write(sSubStr + '<br>');

document.write('<hr/>');

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
//2番目から4番目
var sString = 'zxcvnm'
var sSubStr = sString.substring(1,4);
document.write(sString + '　2番目から4番目<br>');
document.write(sSubStr + '<br>');
document.write('<hr/>');
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript | WEPICKS!</title>

</head>

<body>

//2番目から4番目

var sString = 'zxcvnm'

var sSubStr = sString.substring(1,4);

document.write(sString + '　2番目から4番目<br>');

document.write(sSubStr + '<br>');

document.write('<hr/>');

</script>

</body>

</html>

文字列の検索

JavaScript
ブラウザ
html

//aが始めて出てくる位置
var sString = 'kjdegrlalwef'
var iFstStr = sString.indexOf('a');
document.write(sString + '　aが始めて出てくる位置<br>');
document.write(iFstStr + '番目<br>');
document.write('<hr/>');
</script>

//aが始めて出てくる位置

var sString = 'kjdegrlalwef'

var iFstStr = sString.indexOf('a');

document.write(sString + '　aが始めて出てくる位置<br>');

document.write(iFstStr + '番目<br>');

document.write('<hr/>');

</script>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>JavaScript | WEPICKS!</title>
</head>
<body>

<!-- // ============ JavaScript ============ -->
<script type="text/javascript">
//aが始めて出てくる位置
var sString = 'kjdegrlalwef'
var iFstStr = sString.indexOf('a');
document.write(sString + '　aが始めて出てくる位置<br>');
document.write(iFstStr + '番目<br>');
document.write('<hr/>');
</script>
<!-- ============ JavaScript ============ // -->

</body>
</html>