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講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

1時間でできる無料体験!

 

 

組み込み関数のStringオブジェクトとは

組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Stringオブジェクトは、組み込み関数の1つで、文字列を操作する際に使います。

 

参考までに、組み込み関数の代表的なものには次のようなものがあります。

 

<組み込み関数(代表的なもの)>

  • String 文字列を扱う
  • Number 数値を扱う
  • Boolean 論理値を扱う
  • Array 配列を扱う
  • Date 日付を扱う
  • Math 数値計算で扱う

 

はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。

組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。

var オブジェクト名= new object(); 

 

大石ゆかり

田島メンター!文字列もオブジェクトなんでしょうか?

田島悠介

そうなんだ。JavaScriptでは文字列もオブジェクト、もしくはオブジェクトのように振舞う設定になってるんだよ。

大石ゆかり

オブジェクトはプロパティとメソッドを持っている、1つのかたまりのようなものでしたっけ。

田島悠介

そうそう。さっそくStringオブジェクトを生成してみよう!

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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>

11
hello world の文字数は11文字なので「11」と出力されました。(※空欄も一文字に含まれます)

 

プロパティ2. charAt(左から何文字目かを指定し出力する)

<script>
var s = new String(“hello world”);
console.log(s.charAt(3));
</script>

l
3文字目を指定したので、「l」が出力されました。

 

プロパティ3. replace(文字を置換する)

<script>
var s = new String(“hello world”);
console.log(s.replace(“world”,”Taro”));
</script>

replace
文字を置換してくれるreplace。worldからTaroに置換されました。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

エスケープシーケンスについて

Stringを利用するということは、文字列のエスケープシーケンスを意識する必要があります。

エスケープシーケンスとは、特殊文字を利用する際の実装ルールです。

なお、JavaScriptでは’(シングルクォテーション)に囲まれた文字列と”(ダブルクォテーション)に囲まれた文字列に違いはありません。

これはエスケープシーケンスでも同様です。

 

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

記載方法 意味
NULL文字
' シングルクォート
" ダブルクォート
\ バックスラッシュ(文字)
n 改行
r 復帰
v 垂直タブ
t 水平タブ
b バックスペース
f フォームフィード
uXXXX unicode コードポイント
u{X} … u{XXXXXX} unicode コードポイント 
xXX Latin-1 文字

 

JavaScriptの組み込み関数の1つであるStringオブジェクトを使う方法は以上です。

ほかの組み込み関数といっしょに、是非活用してみてくださいね。

 

大石ゆかり

Stringオブジェクトを生成すると、色々な関数が使えるんですね。

田島悠介

そうそう。そういうのはJavaScriptにあらかじめ組み込まれてるんだよね。一番わかりやすいのは、console.log(“aaa”.length);というコードを実行してみることかな。

大石ゆかり

ただの文字列にドット(.)でつなげて、lengthプロパティを書いてますね。エラーにならないんですか?

田島悠介

ちゃんと表示されるんだよね。JavaScriptはオブジェクトもしくはオブジェクトのように振舞うっていう仕様になってるんだよ。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する