---
type: learn
language: javascript
slug: string/slice
title: "文字列を切り出す・整える — slice と trim"
title_tag: "JavaScript の slice と substring の違い【第2回】"
summary: >
  slice() で必要な部分だけ取り出す方法と、substring() との違いを実行して比べます。
  trim() で落とせる空白と落とせない空白、padStart() での桁揃えまで扱います。
description: >
  slice() と substring() は負の数の扱いが逆です。trim が落とす空白と落とさない空白、padStart での桁揃えまで、実行して違いを確かめられます。
status: published
difficulty: 2
minutes: 9

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

sources:
  - title: "String.prototype.slice — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-string.prototype.slice"
  - title: "String.prototype.substring — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-string.prototype.substring"
  - title: "String.prototype.trim — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim"

terms: [切り出し, 終端を含まない, 空白文字, ゼロ幅スペース, 桁揃え]

links:
  prev: javascript/learn/string/basics
  next: javascript/learn/string/search
  related:
    - javascript/learn/string/basics
    - javascript/how-to/string/truncate
    - javascript/how-to/string/format-date

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

長い文字列から一部だけ欲しいことは、よくあります。日付から年だけ、ファイル名から拡張子だけ。
その基本が `slice()` です。

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

console.log(word.slice(0, 4));
console.log(word.slice(4));
```
```output
Java
Script
```

## 終わりの番号は「含まない」

`slice(start, end)` の `end` は、[key:そこまで]であって[bad:そこを含みません]。

```js run
console.log('0123456789'.slice(2, 5));
```
```output
234
```

[num:2]番目から始まり、[num:5]番目の手前で止まります。取れるのは3文字です。

**`end - start` が取れる長さになる**、と覚えると数えやすくなります。
`5 - 2` で3文字です。

第2引数を省くと、[fn:最後まで]取ります。

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

console.log(word.slice(4));
console.log('[' + word.slice(99) + ']');
```
```output
Script
[]
```

範囲の外を指しても[bad:エラーにはなりません]。空文字列が返ります。
[dim:上の角括弧は、空文字列であることを見えるようにするために足したものです。]

## 負の数で後ろから数える

`slice()` には[key:負の番号]を渡せます。`-1` が最後の文字です。

```js run
const file = 'report.pdf';

console.log(file.slice(-3));
console.log(file.slice(-4));
console.log('abcdef'.slice(2, -1));
```
```output
pdf
.pdf
cde
```

`slice(2, -1)` は「[num:2]番目から、最後の1文字の手前まで」という意味になります。
**末尾を1文字だけ落としたいときによく使います。**

## `substring()` との違い

同じような働きをする `substring()` があります。**ですが、負の数の扱いが違います。**

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

console.log(word.slice(-6));
console.log(word.substring(-6));
```
```output
Script
JavaScript
```

`substring()` は[bad:負の数を 0 として扱います]。後ろから数えてくれません。

さらに、引数の大小が逆のときの動きも違います。

```js run
const digits = '0123456789';

console.log('[' + digits.slice(5, 2) + ']');
console.log('[' + digits.substring(5, 2) + ']');
```
```output
[]
[234]
```

`substring()` は[fn:2つの引数を勝手に入れ替えます]。`slice()` は素直に空文字列を返します。

| | `slice()` | `substring()` |
|---|---|---|
| 負の数 | 後ろから数える | [num:0]として扱う |
| `start > end` | 空文字列 | 入れ替えて実行 |
| 配列にも同じ名前がある | ある | 無い |

**迷ったら `slice()` を使ってください。** 配列の `slice()` と考え方が同じで、覚え直しが要りません。
[dim:`substring()` の「勝手に入れ替える」挙動は、書き間違いを黙って通してしまいます。]

## 前後の空白を落とす

入力欄から受け取った文字列には、たいてい余計な空白が付いています。`trim()` が落とします。

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

console.log('[' + input.trim() + ']');
console.log('[' + input.trimStart() + ']');
console.log('[' + input.trimEnd() + ']');
```
```output
[こんにちは]
[こんにちは  ]
[  こんにちは]
```

**落とすのは前後だけです。** 真ん中の空白は残ります。

### 全角の空白も改行も落ちる

`trim()` が落とすのは半角スペースだけではありません。

```js run
console.log('[' + '\n\t あ \t\n'.trim() + ']');
console.log('[' + '　全角空白　'.trim() + ']');
console.log(' '.trim().length);
```
```output
[あ]
[全角空白]
0
```

改行、タブ、全角スペース、そして ` `（[type:ノーブレークスペース]）も落ちます。
**Webの入力欄から来る空白は、たいていこれで足ります。**

### 落ちない空白がある

ただし[type:ゼロ幅スペース]（`​`）は落ちません。

```js run
console.log('​'.trim().length);
```
```output
1
```

見た目には何も無いのに、長さは[num:1]のままです。
**Webページからコピーした文字列に紛れ込むことがあります。**
[bad:「空白を消したのに一致しない」]ときは、これを疑ってください。

## 桁を揃える

`padStart()` は、指定した長さになるまで[fn:先頭を埋めます]。

```js run
console.log('7'.padStart(3, '0'));
console.log('7'.padEnd(3, '0'));
console.log('日付: ' + String(7).padStart(2, '0'));
```
```output
007
700
日付: 07
```

第2引数を省くと[key:半角スペース]で埋まります。

```js run
console.log('[' + '1'.padStart(3) + ']');
```
```output
[  1]
```

すでに長いときは[em:何もしません]。切り詰めはしません。

```js run
console.log('abcd'.padStart(2, '0'));
```
```output
abcd
```

埋める文字が複数あるときは、必要な分だけ使われて[fn:途中で切られます]。

```js run
console.log('5'.padStart(4, 'ab'));
```
```output
aba5
```

## 繰り返す

`repeat()` は同じ文字列を並べます。区切り線を作るときに使えます。

```js run
console.log('abc'.repeat(3));
console.log('─'.repeat(10));
```
```output
abcabcabc
──────────
```

## よくある間違い

### 負の数を `substring()` に渡す

```js bad
const file = 'report.pdf';

console.log(file.substring(-3));
```
```output
report.pdf
```

拡張子だけ取るつもりが、[bad:全部返ってきます]。エラーが出ないので気づきにくい間違いです。
`slice(-3)` に変えれば `pdf` が取れます。

### `trim()` の結果を使い忘れる

```js bad
const input = '  こんにちは  ';

input.trim();

console.log('[' + input + ']');
```
```output
[  こんにちは  ]
```

[第1回](/ja/javascript/learn/string/basics/)で見たとおり、**文字列は書き換えられません。**
`trim()` は[key:新しい文字列を返すだけ]で、元の `input` は変わりません。戻り値を受け取ってください。

## まとめ

- `slice(start, end)` の `end` は[bad:含まない]。取れる長さは `end - start`
- 負の数は[key:後ろから]。`slice(-3)` で末尾3文字
- `substring()` は負を[num:0]にし、引数を[bad:勝手に入れ替える]。**`slice()` を使う**
- `trim()` は前後だけ。全角空白・改行・ノーブレークスペースも落ちる
- **ゼロ幅スペースは落ちない。** 「消したのに一致しない」の原因になる
- `padStart()` は桁揃え。すでに長ければ[em:何もしない]

## 次に学ぶ

文字列の中から[key:目的の文字を探す]方法を学びます。
`includes()` と `indexOf()` の使い分け、大文字小文字を無視した検索、
そして分けてつなぎ直す `split()` と `join()` を扱います。

→ [第3回: 文字列を探す・分ける・置き換える](/ja/javascript/learn/string/search/)