JavaScript dataset：取出的值仍是字串

先看這個固定例子

段落設 data-enabled="false"、data-line-count="3"。分開看原字串、Boolean 轉換、是否等於 true 的明確判斷及數字轉換。

完整頁面內容與固定程式

<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" data-enabled="false" data-line-count="3">工作坊筆記</p><output id="result"></output>
<script>const data=document.querySelector('#note').dataset;const result={raw:data.enabled,type:typeof data.enabled,truthy:Boolean(data.enabled),explicit:data.enabled==='true',count:Number(data.lineCount)};
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>

確實的 console 輸出

{"raw":"false","type":"string","truthy":true,"explicit":false,"count":3}

輸入與原生結果
核對項目	所給輸入或動作	結果
enabled	"false"	type: string; truthy: true
明確旗標規則	enabled==='true'	false
lineCount	"3"	Number: 3

原生機制怎樣處理

dataset 讀出的屬性值是字串，data-line-count 對應 lineCount。「false」不是空字串，所以 Boolean 判為真。本例旗標規則是明確等於字串 true；Number("3") 只示範這個有效輸入，不代替任意資料驗證。未有屬性則得到 undefined。

比較另一寫法

Boolean 不會解析 true、false 這兩個字。本例無效數字經 Number 得到 NaN，再用 String 明確顯示，避免 JSON 把它變成 null。

另開的反例原始碼

<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" data-enabled="false" data-line-count="three">工作坊筆記</p><output id="result"></output>
<script>const data=document.querySelector('#note').dataset;const result={enabled:Boolean(data.enabled),numeric:String(Number(data.lineCount))};
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>

反例輸出

{"enabled":true,"numeric":"NaN"}

試清邊界

data-enabled 沒有設定，與明確留空有何分別？

查看參考答案

未設定是 undefined，屬性不存在；留空則有屬性、值是空字串。兩者 Boolean 都是假，單靠轉換會混為一談。

另開的邊界原始碼

<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="missing">未設屬性</p><p id="empty" data-enabled="">屬性留空</p><output id="result"></output>
<script>const missing=document.querySelector('#missing'),empty=document.querySelector('#empty');const result={missingType:typeof missing.dataset.enabled,missingPresent:missing.hasAttribute('data-enabled'),empty:empty.dataset.enabled,emptyPresent:empty.hasAttribute('data-enabled'),truthy:[Boolean(missing.dataset.enabled),Boolean(empty.dataset.enabled)]};
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>

邊界輸出

{"missingType":"undefined","missingPresent":false,"empty":"","emptyPresent":true,"truthy":[false,false]}

原始例子檔案

下載完整例子 (HTML) ↓