---
type: learn
language: javascript
slug: string/basics
title: "文字列の基本 — 作る・つなぐ・数える"
title_tag: "JavaScript 文字列の基本 — 作る・つなぐ・数える【第1回】"
summary: >
  文字列の作り方、テンプレートリテラルでの組み立て、length での数え方、
  そして「一度作った文字列は書き換えられない」という性質までを、実行しながら確かめます。
description: >
  文字列は一度作ると書き換えられません。同じコードが sloppy では黙って無視され、strict では例外になる違いを、両方このページで実行して見せます。
status: published
difficulty: 1
minutes: 8

versions:
  verified: "Node 22.22.3"
  since: "ES1"
  deprecated: null
  removed: null

sources:
  - title: "String Objects — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-string-objects"
  - title: "Template Literals — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-template-literals"
  - title: "String — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String"

terms: [文字列, テンプレートリテラル, イミュータブル, 添字, strict モード]

links:
  prev: null
  next: javascript/learn/string/slice
  related:
    - javascript/learn/array/basics

content_updated_at: 2026-09-08
published_at: 2026-09-08
---

[type:文字列]は、文字を並べたものを1つの値として扱うための型です。
名前、住所、エラーの文言、画面に出す言葉。**プログラムが人と接する場所は、たいてい文字列です。**

```js run
const greeting = 'こんにちは';

console.log(greeting);
console.log(typeof greeting);
```
```output
こんにちは
string
```

## 3種類の書き方がある

囲む記号は3つあり、どれで囲んでも同じ文字列になります。

```js run
console.log("ダブルクォート");
console.log('シングルクォート');
console.log(`バッククォート`);
```
```output
ダブルクォート
シングルクォート
バッククォート
```

**3つある理由は、中に引用符そのものを書きたいときのためです。**

```js run
console.log("it's");
console.log('言った: "はい"');
```
```output
it's
言った: "はい"
```

囲んでいる記号と違う記号なら、そのまま書けます。
[dim:同じ記号を中に書きたいときは `\'` のように打ち消せますが、まずは囲みを変えるほうが読みやすくなります。]

## 長さを数える

`length` は[key:プロパティ]で、`()` を付けません。

```js run
console.log('こんにちは'.length);
console.log('JavaScript'.length);
console.log(''.length);
```
```output
5
10
0
```

中身が無い文字列を[type:空文字列]と呼びます。長さは[num:0]です。
[bad:「無い」を表すのに `null` を使うか空文字列を使うかは別の話]なので、ここでは「長さ0の文字列がある」とだけ覚えてください。

> **`length` は「見た目の文字数」とは限りません。**
> 絵文字や結合文字では数が合わなくなります。理由と対処は[第4回](/ja/javascript/learn/string/unicode/)で扱います。

## 番号で1文字取り出す

配列と同じく、`[]` に[type:添字]を書きます。番号は[num:0]から始まります。

```js run
const word = 'JavaScript';

console.log(word[0]);
console.log(word[4]);
console.log(word[99]);
```
```output
J
S
undefined
```

範囲の外を読んでも[bad:エラーにはなりません]。`undefined` が返ります。
[key:止まらないので気づきにくい]、という点は配列とまったく同じです。

### 後ろから数えるなら `at()`

`[-1]` は使えません。負の番号で取りたいときは `at()` を使います。

```js run
const word = 'JavaScript';

console.log(word.at(-1));
console.log(word.at(0));
console.log(word.at(99));
```
```output
t
J
undefined
```

## 一度作った文字列は書き換えられない

ここが配列といちばん違うところです。文字列は[key:イミュータブル]、つまり[fn:あとから中身を変えられません]。

```js run
const word = 'abc';

word[0] = 'X';

console.log(word);
```
```output
abc
```

**代入したのに、何も起きていません。**
エラーも出ません。`word` は `abc` のままです。

### 同じコードが、環境によっては止まる

上の実行結果は、[type:sloppy モード]という緩い設定のときのものです。
先頭に `'use strict'` と書くと[type:strict モード]になり、**同じコードが例外になります。**

```js run
'use strict';

const word = 'abc';

word[0] = 'X';

console.log(word);
```
```output
TypeError: Cannot assign to read only property '0' of string 'abc'
```

[em:どちらもこのページで実際に実行した結果です。] 1行足しただけで挙動が変わりました。

**この違いは知っておく価値があります。**
いまの JavaScript でファイルを `import` / `export` で書くと、その中身は自動的に strict モードになります。
つまり[key:実務のコードでは例外になるほう]が普通です。黙って無視されるのを当てにしないでください。

### 変えたいときは「作り直す」

書き換えられないので、[fn:新しい文字列を作って入れ直します]。

```js run
let word = 'abc';

word = 'X' + word.slice(1);

console.log(word);
```
```output
Xbc
```

`toUpperCase()` のようなメソッドも、[em:元を書き換えず新しい文字列を返します]。

```js run
const word = 'abc';
const loud = word.toUpperCase();

console.log(loud);
console.log(word);
```
```output
ABC
abc
```

元の `word` は `abc` のままです。**戻り値を受け取らないと、何も起きていないのと同じになります。**

## つなぐ

`+` でつなげます。

```js run
console.log('こんにちは' + '、' + '世界');
```
```output
こんにちは、世界
```

### 値を混ぜるならテンプレートリテラル

バッククォートで囲むと、`${}` の中に[key:値や式を直接書けます]。これを[type:テンプレートリテラル]と呼びます。

```js run
const name = '世界';
const count = 3;

console.log(`こんにちは、${name}`);
console.log(`合計 ${count} 件`);
console.log(`1 + 2 = ${1 + 2}`);
```
```output
こんにちは、世界
合計 3 件
1 + 2 = 3
```

`${}` の中には[key:式]が書けます。計算もメソッド呼び出しもできます。

### 改行をそのまま書ける

バッククォートの中では、[fn:改行がそのまま改行になります]。

```js run
console.log(`1行目
2行目`);
```
```output
1行目
2行目
```

`+` と `\n` を並べるより読みやすくなります。

## よくある間違い

### `+` で数と混ぜると足し算にならない

```js bad
console.log('3' + 4);
```
```output
34
```

[bad:`7` にはなりません。] `+` は片方が文字列だと[key:連結]として働くので、`4` が文字列に変えられて `'34'` になります。

数として足したいなら、先に数へ変換します。

```js run
console.log(Number('3') + 4);
```
```output
7
```

[dim:ちなみに `-` や `*` には連結の意味が無いので、`'3' * 4` は `12` になります。同じ見た目で逆の結果になるので、`+` だけ特別だと覚えてください。]
→ [文字列を数値に変換する](/ja/javascript/how-to/string/to-number/)

### `${}` に何を入れても文字列になる

```js run
console.log(`${null}`);
console.log(`${undefined}`);
console.log(`${[1, 2]}`);
console.log(`${{}}`);
```
```output
null
undefined
1,2
[object Object]
```

**オブジェクトを入れると `[object Object]` になります。**
中身を見たいときは `${}` に入れず、`console.log(obj)` のようにそのまま渡してください。
画面に `[object Object]` が出たら、[bad:この取り違えを疑ってください]。

## まとめ

- 文字列は `'` `"` `` ` `` のどれで囲んでも同じ。**中に書きたい記号で選ぶ**
- `length` は `()` を付けない。[num:0]文字の[type:空文字列]もある
- 添字は[num:0]から。範囲の外は[bad:エラーにならず] `undefined`
- 後ろから取るなら `at(-1)`
- **文字列は書き換えられない。** 変えたいときは作り直す
- strict モードでは、書き換えようとすると[em:例外になる]
- 値を混ぜるなら[type:テンプレートリテラル]。`+` は数と混ぜると連結になる

## 次に学ぶ

長い文字列から[key:必要な部分だけ取り出す]方法を学びます。
`slice()` と `substring()` の違い、前後の空白の落とし方、桁を揃える書き方を比べます。

→ [第2回: 文字列を切り出す・整える](/ja/javascript/learn/string/slice/)