【6日でできるJavaScript入門】文字の操作
JavaScriptには、文字列を自在に操作するための豊富なメソッドやプロパティが用意されています。文字の一部を抜き出したり、置換・分割したりといった処理を行うことで、フォーム入力やファイル名の加工、データの整形など、Webアプリケーション開発に不可欠な機能を実現できます。ここでは、文字の操作に関する基本的な考え方と主なメソッドの使い方、具体的な実践例について詳しく解説します。
1. 文字列のプロパティと基本操作
1.1. lengthプロパティ
文字列が何文字あるかを取得します。
| プロパティ | 説明 | 使用例 | 結果 |
|---|---|---|---|
| .length | 文字数を返す | 'こんにちは'.length | 5 |
let str = 'JavaScript入門';
let count = str.length; // 文字数を取得
console.log(count); // 9出力例
91.2. 文字列の取得・変換
よく使う文字列の取得・変換メソッド。
| メソッド名 | 用途 | 例 | 結果 |
|---|---|---|---|
| .toUpperCase() | 英字をすべて大文字に変換 | 'abc'.toUpperCase() | "ABC" |
| .toLowerCase() | 英字をすべて小文字に変換 | 'DEF'.toLowerCase() | "def" |
| .charAt(n) | 指定位置の文字を取得 | 'りんご'.charAt(1) | "ん" |
| .indexOf('文字') | 指定した文字が最初に現れる位置を取得 | 'ばなな'.indexOf('な') | 1 |
| .slice(開始, 終了) | 一部を抜き出し（開始～終了-1） | 'オレンジ'.slice(2, 4) | "レン" |
| .replace('a','b') | 指定文字を別の文字に置換 | 'さくら'.replace('く','け') | "さけら" |
2. 文字列の応用的な操作
2.1. 分割と連結
文字列を特定の文字で分割したり、配列を連結したりする方法です。
| メソッド名 | 用途 | 例 | 結果 |
|---|---|---|---|
| .split('区切り') | 区切りで分割し配列に | 'A,B,C'.split(',') | ["A", "B", "C"] |
| .join('区切り') | 配列を文字列で連結 | ['日','月','火'].join('/') | "日/月/火" |
サンプル： カンマ区切りで入力された値を分割してリスト表示
ファイル名： lesson27-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📄 文字列分割の例</title>
</head>
<body>
<h2>好きなフルーツをカンマで入力してください</h2>
<input id="fruitInput" type="text" value="りんご,バナナ,みかん">
<button id="btn">リストに分ける</button>
<ul id="result"></ul>
<script>
document.getElementById('btn').addEventListener('click', function() {
let input = document.getElementById('fruitInput').value;
let fruits = input.split(',');
let html = '';
for(let i=0; i<fruits.length; i++){
html += '<li>' + fruits[i].trim() + '</li>';
}
document.getElementById('result').innerHTML = html;
});
</script>
</body>
</html>ブラウザの出力例
出力例
・りんご
・バナナ
・みかん2.2. 文字列の置換と削除
let text = 'りんご-みかん-バナナ';
let changed = text.replace('みかん', 'ぶどう');
console.log(changed); // "りんご-ぶどう-バナナ"出力例
りんご-ぶどう-バナナ３．実用的な文字列操作の例
3.1. メールアドレスのドメインだけ取得する
let email = "taro@example.com";
let atIndex = email.indexOf("@");
let domain = email.slice(atIndex + 1);
console.log(domain); // "example.com"3.2. ファイル名から拡張子を抜き出す
let file = "sample.photo.jpg";
let dot = file.lastIndexOf('.');
let ext = file.slice(dot + 1);
console.log(ext); // "jpg"４．よく使うHTMLタグと文字操作の関係
| タグ | 役割 | よく使うプロパティやメソッド |
|---|---|---|
| <input> | ユーザー入力 | value（取得/代入） |
| <textarea> | 複数行入力 | value（取得/代入） |
| <div> | 汎用表示枠 | textContent, innerHTML, innerText |
まとめ
JavaScriptの文字列操作はWebアプリのあらゆる場面で利用されます。プロパティやメソッドの基本をしっかり覚えて、実践で柔軟に活用できるようになりましょう。特に「何番目？」や「一部だけ抜き出す」「置換」「分割」は頻繁に使うため、手を動かして慣れておくことが大切です。