jQueryの$elm.data()で取得できる値は暗黙でstringから型変換される

知らなくてコケた

通常,element.datasetから得られるカスタムデータ属性の値はstringですが,jQueryのdataメソッドはこれらを暗黙的に型変換します.

以下コード踏まえたサンプル.

<!-- 長いので改行いれてます -->
<div id="test"
     data-str="hogefuga"
     data-num="01234"
     data-bool="true"
     data-ary="[1,2,3]"
     data-obj='{"foo":"bar"}'>

     <p>ほげほげほげ</p>
</div>

たとえば,このようなdata-*がコッテリ付いた要素があったとして,その要素から$elm.data()で値を取得すると・・・

var $elm = $('#test');

// string
$elm.data('str');  // 'hogefuga'

// number
$elm.data('num');  // 1234

// boolean
$elm.data('bool'); // true

// array
$elm.data('ary');  // [1,2,3]

// object
$elm.data('obj');  // {foo:'bar'}

なんと型変換されます.オブジェクトっぽい文字列はobjectに変換されますし,その他それっぽい文字列はそれっぽい型に変換されて渡されます.

自分がコケたのは,例にも挙げたようなnumericだけど先頭が0のstringを,numberに変換されて1234なってしまっていたパターン.仕様を把握してませんでした.lol

確実にstringのまま取得したいならattrを使う

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string. To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method..data() – jQuery API

dataメソッドはstringから色々型変換しちゃうから,ピュアなstringで取得したいならattr使うといいよ,という話でした.

ドキュメント読んでなかった自分が悪いのは棚に上げつつ,キモいすごく親切ですね.

追記おまけ

jQuery source viewerから変換部分の実装拾ってきた.うーん...直球(;´Д`)

// `dataAttr` from 1.7pre Live From Git (3ad0ba62f03ff3d7aec7d3dfb25492cdf33350a7)

function dataAttr(elem, key, data) {
    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if (data === undefined && elem.nodeType === 1) {

        var name = "data-" + key.replace(rmultiDash, "-$1").toLowerCase();

        data = elem.getAttribute(name);

        if (typeof data === "string") {
            try {
                data = data === "true" ? true : data === "false" ? false : data === "null" ? null : jQuery.isNumeric(data) ? parseFloat(data) : rbrace.test(data) ? jQuery.parseJSON(data) : data;
            } catch(e) {}

            // Make sure we set the data so it isn't changed later
            jQuery.data(elem, key, data);

        } else {
            data = undefined;
        }
    }

    return data;
}

個人的には,$elm.data(key[, type])ぐらいにして,typeの明示があったときだけ変換してくれればいいと思う.実際はsetとgetのインターフェース混ざってるからできなさそうだけど.


Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search