javascript - 長い JavaScript 文字列の読みやすさを改善する

Question

以下をフォーマットするより良い方法は何でしょうか。これは現在、1 つの実行オンライン行にあります。

$(this).siblings().last().append('<span class="territory"> ' + territory + ' <a href="#;" class="remove-territory delete" data-territory_code="' + territory + '" data-task_id="' + task_id + '">x</a>,</span>')

Answer 1

個人的には、jQuery を使用してタグを作成し、属性を設定することを好みます。

$(this).siblings().last().append($('<span>')
                                  .addClass('territory')
                                  .append(territory)
                                  .append($('<a>')
                                           .attr({ href: '#;', data-territory_code: territory, data-task_id: task_id })
                                           .addClass('remove-territory delete')
                                           .html('x'))
                                  .append(','));           

Answer 2

読みやすいので、配列結合を使用することを好みます。

$(this)
    .siblings()
        .last()
            .append([
                '<span class="territory"> ',
                territory,
                ' <a href="#;" class="remove-territory delete" data-territory_code="',
                territory,
                '" data-task_id="',
                task_id,
                '">x</a>,</span>'
            ].join(''))

または、jQuery で要素を作成することによって:

var $span = $('<span>')
                .addClass('territory')
                .text(' ' + territory),
    $link = $('<a>')
                .attr({
                    'href': '#',
                    'data-territory_code': territory,
                    'data-task_id': task_id
                })
                .addClass('remove-territory delete')
                .text('x');

$span.append($link).append(',');

$(this)
    .siblings()
        .last()
            .append($span);