icon
icon

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つで、文字列を操作する際に使います。

 

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

 

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

  • 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に置換されました。

 

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

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講座)を開催しています。プログラミングの初心者でも受講可能です。