拼接字符串用于HTML属性时格式错误，如何修正？

架构老林

2026-6-24

问题描述

当前生成的HTML代码：

<tr data-providernum="12345" data-providername="JARVIS," claire="" elizabeth="">

期望得到的HTML代码：

<tr data-providernum="12345" data-providername="JARVIS, claire" >

使用的代码如下：

var lastname      = record[1];
var firstname     = record[2];

var fullnames = lastname+ ', ' + firstname;

var newRow = "<tr data-providernum=" + providerNum + " data-providername=" + fullnames + "><td>" + providerNum + "</td><td>" + lastname + "</td><td>" + firstname + "</td></tr>";
$("#searchresult").append(newRow);

尝试过多种单双引号组合拼接字符串，但始终无法解决问题，该如何实现预期效果？

解决方法

问题出在字符串拼接时，没有给data-providername的属性值加上正确的引号包裹。当fullnames包含空格时，原代码会把空格后的内容解析成新的HTML属性，导致出现claire=""这类错误属性。

以下是两种可靠的解决方式：

方式一：调整引号嵌套逻辑

把外层的双引号换成单引号，让属性值的双引号不会和外层字符串的引号冲突，确保data-providername的完整值被包裹：

var newRow = '<tr data-providernum="' + providerNum + '" data-providername="' + fullnames + '"><td>' + providerNum + '</td><td>' + lastname + '</td><td>' + firstname + '</td></tr>';

方式二：使用jQuery DOM创建方法（更推荐）

直接通过jQuery创建元素，完全避免字符串拼接的引号问题，代码可读性和稳定性更高：

var $tr = $('<tr>', {
  'data-providernum': providerNum,
  'data-providername': fullnames
})
.append('<td>' + providerNum + '</td>')
.append('<td>' + lastname + '</td>')
.append('<td>' + firstname + '</td>');

$('#searchresult').append($tr);

以上两种方式都能确保data-providername的属性值被正确包裹，不会出现多余的错误属性。