JavaScriptでStringオブジェクトを使う方法【初心者向け】

プログラミング初心者向けにJavaScriptの組み込み関数の1つである【Stringオブジェクト】を使う方法を解説した記事です。文字列の長さを出力する「length」などプロパティの例も合わせて紹介しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が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(); 

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

そうそう。さっそく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>

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

 

 

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

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

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

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

 

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