javascript - jQuery 中 .push 数组值之间的空格

Question

我创建了日期名称 7 个复选框和 1 个隐藏输入类型。如果用户单击作为复选框的日期名称。然后它们的值打印在输入中。
这是我的代码:

<div class="ml-4">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="monday" name="days_names" value="Monday">
        <label class="custom-control-label" for="monday">Monday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
        <label class="custom-control-label" for="tuesday">Tuesday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
        <label class="custom-control-label" for="wednesday">Wednesday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
        <label class="custom-control-label" for="thursday">Thursday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
        <label class="custom-control-label" for="friday">Friday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
        <label class="custom-control-label" for="saturday">Saturday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
        <label class="custom-control-label" for="sunday">Sunday</label>
    </div>
</div>
<input type="" class="form-control selected_days_names" name="days_names" />

<script>
    $(document).ready(function() {
        $("input[name='day_name_selector']").change(function() {
            var final = new Array();
            $('input[name="day_name_selector"]:checked').each(function(){        
                var values = $(this).val();
                final.push(values);
            });
            $('.selected_days_names').val(final);
        });
    });
</script>

问题是，我在输入中获取没有空格的值，如下所示 --> Sunday,Monday,Tuesday..... 我希望它显示输入中的值，如下所示 -->> 周日、周一、周二 值之间有空格。如何在值之间获取空格？请帮助我

Answer 1

final 是一个数组，当您调用 .val 时，传递的表达式会自动转换为字符串。当数组转换为字符串时，默认情况下，它将仅通过逗号连接，例如 .join(',')。如果您想使用其他任何内容(例如逗号和空格)进行连接，则必须明确这样做:

$('.selected_days_names').val(final.join(', '));

还可以考虑使用 [] 而不是 new Array() 声明数组:

var final = [];

您还可以考虑使用 .map 一次性构建数组:

  var final = $('input[name="day_name_selector"]:checked')
    .map(function(){
      return $(this).val();
    })
    .get();