【JavaScript】textContentの文字列を数値に変換して演算に使用する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでtextContentの文字列を数値に変換して演算に使用する方法をご紹介しています。

JavaScriptでtextContentで取得した数値を演算したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

textContentとは

textContentはNodeのプロパティで、自身もしくは子孫がもつテキストを返します。戻り値は文字列もしくはnullとなっており、テキストが存在する場合は文字列を、存在しない場合はnullを返します。

戻り値は文字列のため、持っているテキストの内容が数字でも文字列型の数字となるため、そのまま演算に使用することはできません。演算に使用するためには文字列→数値への変換(キャスト)が必要になります。

文字列を数値に変換する

文字列を数値に変換する方法はいくつかありますが、ここではNumber関数を使用します。Number関数は文字列の数字を引数に指定すると数値を返す関数です。例えば文字列の123というテキストを数値に変換する場合は下記のように記述します。

Number('123');

上記例の戻り値は数値になっていますので、そのまま演算に使用することができます。

textContentの文字列を数値に変換して演算に使用する

前項の内容が本投稿の主旨となりますが、せっかくですのでtextContentで取得した文字列を数値に変換して演算に使用するサンプルを作成してみます。textContentで取得した文字列を数値に変換し、2を乗算して別の要素のtextContentに代入します。

HTML

<p id="text">100200</p>
<p id="result"></p>

JavaScript

const text = document.getElementById('text');
const result = document.getElementById('result');

//textのtext.contentの文字列を数値に変換して2倍にする
result.textContent = Number(text.textContent) * 2;

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果を確認するとtextContentの文字列を数値に変換して演算に使用することができていますね。

最後に

演算に使用する数値はスクリプトに持たせるかinputvalueなどで取り扱う方が良いとは思いますが、textContentが持っている文字列の数字を使用したいケースもあるにはあります。ただ頻繁に使用するわけではないので、文字列から数値への変換はNumber関数で実現できる!これだけ覚えておくと良いかもしれませんね。

以上、JavaScriptでtextContentの文字列を数値に変換して演算に使用する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら