LoginSignup
14
14

More than 5 years have passed since last update.

知らないで損したJS標準ビルドインオブジェクト関数たち

Last updated at Posted at 2017-04-16

先日初めて自分が作ったウェブアプリがリリースされ「めでたい!」となってたんですが、
時間の余裕ができたため、改めてJSのリファレンスを読み、「ちゃんと読んどきゃよかった…」と後悔すること多数。
恥の上塗り感がすごいですがここにさらします。

※ちなみにリファレンスと呼んでるのはこれ(MDN JavaScript リファレンス)のことです。

Date.now()

Date.now() メソッドは、UTC (協定世界時) での 1970 年 1 月 1 日 0 時 0 分 0 秒 から現在までの経過時間をミリ秒単位で返します。

Date.now() - JavaScript | MDN

こんな風に書いてました

new Date().getTime()

処理の目的

当たり前ですが「現在時刻のタイムスタンプを取得すること」でした。
今まではいちいちDate型のオブジェクトを作ってから取得してました…。いやはや。

date_object.getUTCDate()

getUTCDate() は、協定世界時に基づき、指定された日付の「日」を返します。

Date.prototype.getUTCDate() - JavaScript | MDN

こんな風に書いてました

タイムスタンプからTimezoneoffsetを引いてました。
(ちなみにJSのgetTimezoneOffset()は分単位で返ってきます。)

new Date((timestamp_msec + this.getTimezoneOffset() * 60 * 1000))

処理の目的

「タイムスタンプを用いてDateオブジェクトを生成する時、ローカルタイムでなくUTCで表示してほしい」時に使います。

私が実装したアプリケーションが若干特殊な気もしますが、サーバから送られてくるタイムスタンプとは別にタイムゾーンの情報が送られてきます。
タイムスタンプはUTCで送られてきて、タイムゾーン情報は、例えば東京なら -540 が送られてきます。
それで、JSはnew DateでDate型オブジェクトを使うと、そのブラウザの時間帯が使われてしまうので、
単純にタイムスタンプにタイムゾーン情報を引き算してしまうと、それに利用者のローカルタイムも適用されてしまい、意味不明な時刻が表示されてしまいます。

そのため、利用者のローカルタイム分引くようにしていたんですが、普通にUTCで表示できたみたいですね…。

number_object.toFixed()

toFixed() メソッドは、数を固定小数点表記を用いてフォーマットします。

Number.prototype.toFixed() - JavaScript | MDN

こんな風に書いてました

1000かけてFloorしてから10で割るという荒業。

Math.floor(number_object * 1000)/10

処理の目的

「小数点第〇位まで表示したい、等」

この toFixedを使えば

  • 引数を入れないと整数に四捨五入される
  • 引数に整数を入れると、その値分の少数〇位のところで四捨五入され表示される
    • 例えば num.toFixed(1) とすれば小数点第一位まで表示される
  • ちなみに 数が 1.1toFixed(3) とかやると 1.100 になるみたいです。

number_object.toLocaleString()

toLocaleString() メソッドはある言語に則した数の表記を適用したstringを返します。

Number.prototype.toLocaleString() - JavaScript | MDN

こんな風に書いてました

実は道を踏み外す前に先輩に教えてもらったのでやらかしてはいないです。
最初は後ろから3文字ごとにカンマを挿入しようとしてました。

処理の目的

「数値をカンマ区切りで表示したい」
おそらく本来の意図した用途とは違うのでしょうが、とりあえず使っとけば数字がカンマ区切りになります。

string.trim()

trim() メソッドは、文字列の両端の空白を削除します。このコンテクストでの空白には、空白文字(スペースやタブ、ノーブレークスペースなど)とすべての改行文字(LF や CR など)を含みます。

String.prototype.trim() - JavaScript | MDN

こんな風に書いてました

string.split(" ").join().split(" ").join()

※1個目が半角で2個目が全角の空白です。

処理の目的

「空白を除いた文字列が1文字以上か確認する」です。

一番やらかした感大きいです。
trimは前後の文字列の空白を取るものなので、間の空白は取らなかったりするんですが、
今回の処理の目的は達成可能なので、明らかにこっち使う方がいいですね死にたい。

かんそう

基礎の勉強は大切だなーと実感…。
知ってる知らないで大きな差が出ることもあるので、
初めて触れる技術はドキュメント丸読みくらいでいいのかもと思いました。
モノによりますがそんなに時間取られるわけでもないですしね。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14