javascript - 将输入连接成一个字符串

Question

我有一个在线调度程序的自定义表单组。我试图找到将输入连接到一个字符串中的最佳方法。我使用了 jQuery 的 map 函数，它似乎工作得很好。在移动设备或触摸屏上使用这种方法会有任何问题吗？

External JSFiddle

$('input, select').on('change', function() {
  var userTime = $('.form-appointment-time select[name=form-hour], select[name=form-minute], input[name=time_format]:checked')
    .map(function() {
      return this.value;
    }).get().join();

  var userDate = userTime.replace(',', ':');

  // For preview
  $('.result').replaceWith('<p class="result">' + userDate + '</p>');
});

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="form-group form-appointment-time">
  <label class="col-sm-2 control-label">Preferred Time:</label>
  <div class="col-sm-10">
    <div class="form-inline">
      <select class="form-control" name="form-hour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      <select class="form-control" name="form-minute">
        <option value="00">00</option>
        <option value="30">30</option>
      </select>
      <input name="time_format" id="time-am" type="radio" value="AM">
      <label for="time-am">AM</label>
      <input name="time_format" id="time-pm" type="radio" value="PM">
      <label for="time-pm">PM</label>
    </div>
  </div>
</div>

<p class="result"></p>

Answer 1

您可以组合、映射、缩减和连接来格式化您的时间。当您到达需要空间的位置时，您可以使用 reduce 来展平数组。

我将字段的样式规则添加为 Виктор Щелкунов建议。

var timeFields = [{
  text: 'Hour',
  value: 11
}, {
  text: 'Minute',
  value: 59
}, {
  text: 'Second',
  value: 59
}, {
  text: 'Millisecond',
  value: 999
}, {
  text: 'Meridiem',
  value: 'PM'
}];

function formatTime(items) {
  return items.map(function(item) {
    return item.value;
  }).reduce(function(res, item, idx, arr) {
    return (idx !== 4 ? res : [res.join(':')]).concat([item]);
  }, [])
  .join(' ');
}

document.body.innerHTML = formatTime(timeFields);

在行动

我修改了formatTime函数，这样你就可以在应该有空格的地方传入索引。

$('input, select').on('change', function() {
  var userDate = formatTime($('.form-appointment-time select[name=form-hour], select[name=form-minute], input[name=time_format]:checked').get(), 2);
  
  // For preview
  $('.result').replaceWith('<p class="result">' + userDate + '</p>');
});

function formatTime(items, spaceIndex) {
  return items.map(function(item) {
    return item.value;
  }).reduce(function(res, item, idx, arr) {
    return (idx !== spaceIndex ? res : [res.join(':')]).concat([item]);
  }, [])
  .join(' ');
}

select,input{
    width: auto !important;
    display: inline-block !important;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="form-group form-appointment-time">
  <label class="col-sm-2 control-label">Preferred Time:</label>
  <div class="col-sm-10">
    <div class="form-inline">
      <select class="form-control" name="form-hour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      <select class="form-control" name="form-minute">
        <option value="00">00</option>
        <option value="30">30</option>
      </select>
      <input name="time_format" id="time-am" type="radio" value="AM">
      <label for="time-am">AM</label>
      <input name="time_format" id="time-pm" type="radio" value="PM">
      <label for="time-pm">PM</label>
    </div>
  </div>
</div>

<p class="result"></p>

---

另一种方法

您还可以使用停止点数组来控制何时连接数组中的值。 Array.prototype.shift() 是一个非常有用的方法。它将删除数组中的第一项以供立即使用。该阵列将自动更新。

Array.multiJoin = function(arr, stops) {
  return arr.reduce(function(res, item, idx) {
      return (
        (stops.length > 1 && idx > stops[1][0]) ||
        (stops.length === 1 && idx === stops[0][0]) ?
          [res.join(stops.shift()[1])] : res
      ).concat([item]);
    }, [])
    .join(stops.length > 0 ? stops[0][1] : '');
}

var timeFields = [
  { text: 'Hour',        value:  11  },
  { text: 'Minute',      value:  59  },
  { text: 'Second',      value:  59  },
  { text: 'Millisecond', value: 999  },
  { text: 'Meridiem',    value: 'PM' }
];

var stops = [
  [0, ':'],
  [2, '.'],
  [3, ' ']
];

function formatTime(items, stops) {
  return Array.multiJoin(
    items.map(function(item) {
      return item.value;
    }), stops);
}

document.body.innerHTML = formatTime(timeFields, stops);