Question

我正在尝试根据下拉选择将一些参数添加到我的URL中，我想使代码尽可能简短而甜美，因此我正在尝试为这些参数构建一个字符串，以排除任何空白的变量因此它们不会附加到URL字符串。以下是我尝试过的方法：

$(function() {
  var product = 'shirt',
      size = 'large',
      color = 'blue',
      custom = '';
      
  var urlParams = (product === '') ? '' : 'product=' + product + '&' + (size === '') ? '' : 'size=' + size + '&' + (color === '') ? '' : 'color=' + color + '&' + (custom === '') ? '' : 'custom=' + custom;
  
  console.log(urlParams);
  
  // Go to results page
  // location.href = 'results?' + urlParams;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

urlParams的预期输出为：

product=shirt&size=large&color=blue

不幸的是，它返回一个空字符串。是否可以构建这样的参数？还是有更好的方法来实现这一目标？

Answer 1

括号很重要！

问题是，您没有研究较旧的产品。 custom === ""变得真实，然后您的整个状况崩溃了。更好的方法是：

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = ((product === '') ? '' : 'product=' + product) + '&' + ((size === '') ? '' : 'size=' + size) + '&' + ((color === '') ? '' : 'color=' + color) + '&' + ((custom === '') ? '' : 'custom=' + custom);

  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

现在您可以看到有&个。更好的版本将是：

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = ((product === '') ? '' : 'product=' + product) + '&' + ((size === '') ? '' : 'size=' + size) + '&' + ((color === '') ? '' : 'color=' + color) + '&' + ((custom === '') ? '' : 'custom=' + custom);
  urlParams = urlParams.replace(/^\&+|\&+$/g, '');
  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

最好是使用数组和.join()。

(function() {
  var product = 'shirt',
    size = 'large',
    color = 'blue',
    custom = '';

  var urlParams = [
    ((product === '') ? '' : 'product=' + product),
    ((size === '') ? '' : 'size=' + size),
    ((color === '') ? '' : 'color=' + color),
    ((custom === '') ? '' : 'custom=' + custom)
  ];
  urlParams = urlParams.join("&").replace(/^\&+|\&+$/g, '');
  console.log(urlParams);

  // Go to results page
  // location.href = 'results?' + urlParams;
})();

Answer 2

您可以检查该值并为格式化的字符串取逻辑AND。

var urlParams = (product && 'product=' + product + '&') +
                (size && 'size=' + size + '&') +
                (color && 'color=' + color + '&') +
                (custom && 'custom=' + custom);

另一种方法是使用对象，过滤真实值并使用模板字符串构建格式化的字符串。

function getString(object) {
    return Object
        .entries(object)
        .filter(([, v]) => v)
        .map(([k, v]) => `${k}=${v}`)
        .join('&');
}

var product = 'foo', 
    size = '42',
    color = '',
    data = { product, size, color };
    
    
console.log(getString(data))

Answer 3

const params = {
    product: 'shirt',
    size: 'large',
    color: '',
    custom: null
}
const valid = p => k => typeof p [k] === 'string' && p [k].length > 0
let queryString = Object.keys (params).filter (valid (params)).map (k => `${k}=${params[k]}`).join ('&')

console.log (queryString)

可以使用这样的速记条件构建字符串吗？

3 个答案: