JavaScriptでStringオブジェクトを使う方法【初心者向け】
プログラミング初心者向けにJavaScriptの組み込み関数の1つである【Stringオブジェクト】を使う方法を解説した記事です。文字列の長さを出力する「length」などプロパティの例も合わせて紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptの組み込み関数の1つであるStringオブジェクトを使う方法について解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
組み込み関数のStringオブジェクトとは
組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Stringオブジェクトは、組み込み関数の1つで、文字列を操作する際に使います。
参考までに、組み込み関数の代表的なものには次のようなものがあります。
<組み込み関数（代表的なもの）>
はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。
組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。
var オブジェクト名= new object();
田島メンター！文字列もオブジェクトなんでしょうか？
そうなんだ。JavaScriptでは文字列もオブジェクト、もしくはオブジェクトのように振舞う設定になってるんだよ。
オブジェクトはプロパティとメソッドを持っている、1つのかたまりのようなものでしたっけ。
そうそう。さっそくStringオブジェクトを生成してみよう！
Stringオブジェクトを実際に生成してみよう
Stringオブジェクトを生成してみましょう。適当なオブジェクト名（s）をつけ、文字列hello worldを引数として渡し、出力します。
var s = new String(“hello world”);
※文字列を出力する際は、「” ”」や「’ ’」で囲うのを忘れないでくださいね
<!DOCTYPE html>
<html lang = “ja”>
<head>
<meta charset = “utf-8”>
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var s = new String(“hello world”);
</script>
</body>
</html>
生成できたら、console.logを使って呼び出してみます。
Stringオブジェクトでは基本的に、文字列を操作して出力する際に、便利なプロパティやメソッドを使います。
次の章から見ていきましょう。
Stringオブジェクトのプロパティを呼び出してみよう
Stringオブジェクトでの文字列の操作の仕方を、3つのプロパティを例に見ていきましょう。
プロパティ1. length（文字列の長さを出力する）
オブジェクトのプロパティを呼び出すやり方の確認です。
変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。
<script>
var s = new String(“hello world”);
console.log(s.length);
</script>
hello world の文字数は11文字なので「11」と出力されました。（※空欄も一文字に含まれます）
プロパティ2. charAt（左から何文字目かを指定し出力する）
<script>
var s = new String(“hello world”);
console.log(s.charAt(3));
</script>
3文字目を指定したので、「l」が出力されました。
プロパティ3. replace（文字を置換する）
<script>
var s = new String(“hello world”);
console.log(s.replace(“world”,”Taro”));
</script>
文字を置換してくれるreplace。worldからTaroに置換されました。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
エスケープシーケンスについて
Stringを利用するということは、文字列のエスケープシーケンスを意識する必要があります。
エスケープシーケンスとは、特殊文字を利用する際の実装ルールです。
なお、JavaScriptでは’（シングルクォテーション）に囲まれた文字列と”（ダブルクォテーション）に囲まれた文字列に違いはありません。
これはエスケープシーケンスでも同様です。
エスケープシーケンスの例
| 記載方法 | 意味 |
|---|---|
|
NULL文字 |
' |
シングルクォート |
" |
ダブルクォート |
|
バックスラッシュ(文字) |
n |
改行 |
r |
復帰 |
v |
垂直タブ |
t |
水平タブ |
b |
バックスペース |
f |
フォームフィード |
uXXXX |
unicode コードポイント |
u{X} … u{XXXXXX} |
unicode コードポイント |
xXX |
Latin-1 文字 |
JavaScriptの組み込み関数の１つであるStringオブジェクトを使う方法は以上です。
ほかの組み込み関数といっしょに、是非活用してみてくださいね。
Stringオブジェクトを生成すると、色々な関数が使えるんですね。
そうそう。そういうのはJavaScriptにあらかじめ組み込まれてるんだよね。一番わかりやすいのは、console.log(“aaa”.length);というコードを実行してみることかな。
ただの文字列にドット(.)でつなげて、lengthプロパティを書いてますね。エラーにならないんですか？
ちゃんと表示されるんだよね。JavaScriptはオブジェクトもしくはオブジェクトのように振舞うっていう仕様になってるんだよ。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
