使用double类型初始化input number控件异常问题咨询

我尝试用double类型的值初始化<input type="number">控件，发现当变量的小数部分不为0时，初始化完全不生效。比如下面的代码里，Test 1（值为2.0）能正常显示，但Test 2（值为3.1）的输入框是空的：

<label>Test 1</label><br />
<input type="number" min="0" max="360" step="0.1" value="@test1" /><br />
<label>Test 2</label><br />
<input type="number" min="0" max="360" step="0.1" value="@test2" />

@code {
    public double test1 = 2.0;
    public double test2 = 3.1;
}

原因分析 #

问题出在double类型的精度特性上：像3.1这样的十进制小数，无法用二进制浮点数（double属于这类）精确存储，实际在内存里的是一个接近3.1但有微小偏差的数值（比如3.0999999999999996）。而你的输入框设置了step="0.1"，要求值必须是0.1的整数倍，这个偏差后的数值不符合规则，所以浏览器会直接忽略这个初始化值。

解决方法 #

有两种简单的修复方式：

1. 改用decimal类型：decimal是专门的十进制浮点数类型，能精确表示像3.1这样的小数，完全适配step的要求：

@code {
    public decimal test1 = 2.0m;
    public decimal test2 = 3.1m;
}

2. 格式化输出字符串：把double值格式化为保留1位小数的字符串，确保输出的数值符合step规则：

<input type="number" min="0" max="360" step="0.1" value="@test2.ToString("F1")" />

内容的提问来源于stack exchange，提问作者Bert54