JavaScript复制剪贴板异常：ID数值被自动舍入

点击按钮复制ID到剪贴板时，弹窗提示和剪贴板中的ID出现自动舍入，原ID（如76561199144601203）被改为76561199144601200，即使ids数组中存储的是字符串类型。尝试navigator.clipboard.writeText()方法后问题依旧。

问题出在生成按钮的内联onclick事件时的字符串拼接：

$('#user_id_table > tbody:last-child').append('<tr><th scope="row">' + usernames[i] + '</th><td><button onclick="CopyIdToClipboard(' + ids[i] + ')">' + ids[i] + '</button></td></tr>');

这里ids[i]是字符串，但拼接时没有加引号，导致最终生成的HTML是：

<button onclick="CopyIdToClipboard(76561199144601203)">76561199144601203</button>

此时函数接收的是数字类型的ID，而JavaScript中Number类型的精度上限是2^53（约9e15），你的ID长度超过了这个范围，无法被精确存储，因此会被自动舍入。

方法1：拼接时给ID添加引号，传递字符串 #

修改拼接代码，给ids[i]加上单引号或双引号，确保传入函数的是字符串：

for (var i = 0; i < usernames.length; i++) {
    $('#user_id_table > tbody:last-child').append('<tr><th scope="row">' + usernames[i] + '</th><td><button onclick="CopyIdToClipboard(\'' + ids[i] + '\')">' + ids[i] + '</button></td></tr>');
}

这里用\'转义单引号，确保生成的HTML中onclick里的参数是字符串：

<button onclick="CopyIdToClipboard('76561199144601203')">76561199144601203</button>

方法2：使用事件绑定替代内联onclick（更推荐） #

内联事件容易引发这类类型转换问题，推荐用jQuery的事件绑定来避免：

$(document).ready(function () {
    var usernames = ["user1", "user2", "user3", "user4", "user5", "user6", "user7"];
    var ids = ["76561199144601203", "76561199085110484", "76561199202629307", "76561198977492126", "76561199107090117", "76561199156985347", "76561199195037086"];
    
    for (var i = 0; i < usernames.length; i++) {
        // 创建按钮元素并绑定点击事件
        var $btn = $('<button>').text(ids[i]).on('click', function() {
            CopyIdToClipboard($(this).text());
        });
        // 构建表格行并添加到tbody
        var $row = $('<tr>')
            .append($('<th>').attr('scope', 'row').text(usernames[i]))
            .append($('<td>').append($btn));
        $('#user_id_table > tbody').append($row);
    }
});

function CopyIdToClipboard(text) {
    var $tempInput = $('<input type="text">');
    $('body').append($tempInput);
    $tempInput.val(text).select();
    document.execCommand('copy');
    $tempInput.remove();
    alert("Copied the text: " + text);
}

这种方式直接传递字符串，完全避免了类型转换问题，代码也更易维护。

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