如何使用“this”添加字符串

Question

假设我有一个字符串数组。我想在每个字符串前面加上一个固定的（通用）字符串。 我知道在 Javascript 中，字符串可以像 strM = str1 + str2 + str3 + ... + strN 或 strM = concat(str1, str2, str3, ..., strN) 一样连接。考虑这段代码。

var defImgDirPath = 'res/img/';
$([
  'home-icon-dark.png',
  'home-icon-light.png'
]).each(function() {
  /*
   * Prepend each string with defImgDirPath
   */
});

现在我做不到this = defImgDirPath + this;（我笨到想试试）

另外，我尝试了return (defImgDirPath + this);，但这也不起作用。

我在想像this.prependString(defImgDirPath); 这样的函数，但是这样的函数存在吗？如果没有，怎么写？

注意：我知道它也可以通过 for 循环轻松简单地完成，但这样做有什么乐趣呢？ :)

Answer 1

var defImgDirPath = 'res/img/';
var images = [
    'home-icon-dark.png',
    'home-icon-light.png'
];
$(images).each(function(idx, val) {
  images[idx] = defImgDirPath + val;
});

console.log(images);

Answer 2

在 javascript (ECMA 5) 的最新标准中，您可以在没有 jquery 的情况下执行此操作：

var defImgDirPath = 'res/img/';

['home-icon-dark.png','home-icon-light.png'].map(function(i) { 

        return defImgDirPath + i;  });

编辑：此外，jquery 的 map 功能也类似。

Answer 3

问题是您正在更改数组中项目的副本，因此数组不会受到影响。

遍历数组中的索引并将结果放回数组中：

var arr = [ 'home-icon-dark.png', 'home-icon-light.png' ];

for (var i = 0; i < arr.length; i++) {
  arr[i] = defImgDirPath + arr[i];
}

如果你真的想使用 jQuery 的循环方法，那么你需要使用map，这样你就可以得到一个数组的结果。注意需要用到回调函数的参数，因为this不是数组中的项：

arr = $.map(arr, function(str){
  return defImgDirPath + str;
});

Answer 4

在 Javascript 中，this 始终引用一个对象（当前上下文对象），因此它永远不会是字符串，因此尝试将其与另一个字符串连接会失败，正如您所发现的。

然而，你不需要使用 jQuery 或对象来做你正在做的事情；您只是在每个字符串数组的开头添加一个已知值。

让我们用标准的 Javascript 重写它，没有 jQuery 的复杂性......

var defImgDirPath = 'res/img/';
var images = [
  'home-icon-dark.png',
  'home-icon-light.png'
];

for(var count=0; count<images.length; count++) {
    images[count] = defImgDirPath + images[count];
}

我已将图像数组放入一个变量中，以便更容易查看实际的循环代码在做什么。如您所见，这是一个非常简单的循环；这里不需要 jQuery 魔法。

希望有帮助。

Answer 5

this.prependString(defImgDirPath);

没有。字符串在 JavaScript 中是不可变的。连接到一个新字符串就可以了，使用.concat 看起来像

var newString = defImgDirPath.concat(this); // no static function!

如果不存在，我该如何写一个？

你不能，因为assigning object to "this" 是不可能的。

相反，您必须分配给您正在处理的数组的属性（使用 static $.each 而不是处理集合）：

var arr = [
  'home-icon-dark.png',
  'home-icon-light.png'
];
$.each(arr, function(i) {
   arr[i] = defImgDirPath + this;
});
arr[0] // res/img/home-icon-dark.png

我也试过return (defImgDirPath + this);

您需要为此使用map，创建一个新数组：

var arr = $.map([
  'home-icon-dark.png',
  'home-icon-light.png'
], function(str) {
    return defImgDirPath + str;
});

---

当然，完全没有 jQuery 可能会更容易：

for (var i=0; i<arr.length; i++) {
    arr[i] = defImgDirPath + arr[i];
}

而且map 也可作为本机函数使用（不适用于过时的浏览器）：

var arr = [
  'home-icon-dark.png',
  'home-icon-light.png'
].map(function(str) {
    return defImgDirPath + str;
});