JavaScriptで文字列の配列を数値変換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで文字列の配列を数値変換する方法について解説しています。mapメソッドによる配列要素の操作の基本、Numberオブジェクトを使った変換手順を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで文字列の配列を数値変換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

文字列の配列を数値変換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

配列とは

JavaScriptで用いる配列とは一言で表すなら「連番を付与したオブジェクトの集合体」という表現になります。とても利便性が高く、登場頻度も高い配列について、今回は配列内の要素の数値変換という点を解説を行っていきます。

 

mapメソッドとは

配列の中の要素を操作する方法として、mapメソッドというものがよく利用されます。mapメソッドとは与えられた関数を配列のすべての要素に対して呼び出し、その結果で新しい配列を生成するメソッドになります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

mapメソッドの使い方

mapメソッドの構文は以下のようになります。

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// 新しい配列の要素を返す
}[, thisArg])
  • callback:新しい配列の要素を生成するための関数
  • currentValue:現在処理中の要素の値
  • index:現在処理中の要素の配列内におけるインデックス
  • array:map が実行されている配列
  • thisArg:callback を実行するときに this として使う値

 

簡単な使用例をご紹介します

例) 配列全てに1を足して新しい配列を作成する

var arr = [1,2,3,4,5,6]

var new_arr = arr.map(function(num) { return num + 1; });

console.log(new_arr)

// [2,3,4,5,6,7]

 

文字列の配列を数値変換する方法

文字列の配列を数値変換する場合には、Numberオブジェクトを使うことで様々な数字に対応することができます。

var str_array = ['1','2','3.3','4.4e2','5','6e6']

var new_num_array = str_array .map(function(str) { return Number(str)};

console.log(new_num_array);

// [1,2,3.3,440,5,6000000]

 

まとめ

画面のパラメータなどを数値として処理する際には、便利な方法なので是非覚えておきましょう。また、注意点として、数字に変換できない文字列(’こんにちは’)などはNaNとして配列に格納されます。

変換後の配列を扱うときには気をつけましょう。

 

監修してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。