找到逗号，它来自哪里？ Javascript 对象中的数组

Question

好的，所以我已经破解了一些东西，它按预期工作，但我在多个条目之间得到一个逗号。

我有这个

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  let markup = '';

  markup = `
    <section>
      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-purple-800">
          <span class="text-base text-white font-bold">HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.sitePixels.map((x) => x)}
          ${HCP365Object.searchPixels.map((x) => x)}
          ${HCP365Object.emailPixels.map((x) => x)}
          ${HCP365Object.programmaticPixels.map((x) => x)}
        </div>
      </div>

      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-gray-500">
          <span class="text-base text-white font-bold">NON HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.map((x) => x)}
        </div>
      </div>
  `;

  markup += '</section>';

  sendResponse(markup);
});

这反过来又给了我这个：

这个小家伙在哪里：

元素之间是：

const pixelInfo = `
    <div class="element">

      <div class="question flex justify-between px-6 py-4 ${colorGrade}">
        <span class="text-base text-white font-bold">${pixelType}</span>
        <button><i class="fas fa-plus-circle"></i></button>
      </div>

      <div class="answer hideText">
        <span id="pixel-url" class="c-word-wrap text-sm font-mono">${pixelUrl}</span>
          <span id="query-params">${queryParams}</span>
      </div>
    </div>
  `;

每个 pixelInfo 都被推入它自己的对象数组中。这个逗号在这里是因为我正在通过一个数组进行映射并且它正在丢弃 , 吗？有办法摆脱它吗？

这是我的全部代码

const HCP365Object = {
  sitePixels: [],
  searchPixels: [],
  emailPixels: [],
  programmaticPixels: [],
  nonHCP365Pixels: [],
};

// Function to break down the http request into our pixel url with a subset of associating query params.
const onBeforeSendHeadersListener = function (details) {
  let regex = /[?&]([^=#]+)=([^&#]*)/g,
    pixelType,
    pixelUrl = `${details.url}`,
    queryParams,
    params = {},
    match,
    colorGrade;

  if (details.url.includes('&ch=1&')) {
    pixelType = 'HCP365 Site Pixel';
    colorGrade = 'bg-purple-600';
  } else if (details.url.includes('&ch=2&')) {
    pixelType = 'HCP365 Search Pixel';
    colorGrade = 'bg-purple-500';
  } else if (details.url.includes('&ch=3&')) {
    pixelType = 'HCP365 Email Pixel';
    colorGrade = 'bg-purple-400';
  } else if (details.url.includes('&ch=4&')) {
    pixelType = 'HCP365 Programmatic Pixel';
    colorGrade = 'bg-purple-300';
  } else {
    pixelType = 'Non HCP365 PP Pixel';
    colorGrade = 'bg-gray-400';
  }

  // Splitting url's query params out to key value pairs
  while ((match = regex.exec(details.url))) {
    params[match[1]] = match[2];
  }

  // Looping through object's key value pair to place into divs
  for (const [key, value] of Object.entries(params)) {
    queryParams += `
      <div class="text-sm my-1">
        <span class="font-bold uppercase mr-1">${key}: </span>
        <span class="font-normal font-mono capitalize c-word-wrap">${value}</span>
      </div>
    `;
  }

  const pixelInfo = `
    <div class="element">

      <div class="question flex justify-between px-6 py-4 ${colorGrade}">
        <span class="text-base text-white font-bold">${pixelType}</span>
        <button><i class="fas fa-plus-circle"></i></button>
      </div>

      <div class="answer hideText">
        <span id="pixel-url" class="c-word-wrap text-sm font-mono">${pixelUrl}</span>
          <span id="query-params">${queryParams}</span>
      </div>
    </div>
  `;

  // push the relevant pixel into the correct array
  if (details.url.includes('&ch=1&')) {
    HCP365Object.sitePixels.push(pixelInfo);
  } else if (details.url.includes('&ch=2&')) {
    HCP365Object.searchPixels.push(pixelInfo);
  } else if (details.url.includes('&ch=3&')) {
    HCP365Object.emailPixels.push(pixelInfo);
  } else if (details.url.includes('&ch=4&')) {
    HCP365Object.programmaticPixels.push(pixelInfo);
  } else {
    HCP365Object.nonHCP365Pixels.push(pixelInfo);
  }

  return HCP365Object;
};

// Apply the function entered to each header coming from contextweb domain
chrome.webRequest.onBeforeSendHeaders.addListener(
  onBeforeSendHeadersListener,
  {
    urls: ['https://*.contextweb.com/bh/*'],
  },
  ['requestHeaders']
);

// Initiate connection to send Message over to popup.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  let markup = '';

  markup = `
    <section>
      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-purple-800">
          <span class="text-base text-white font-bold">HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.sitePixels.map((x) => x)}
          ${HCP365Object.searchPixels.map((x) => x)}
          ${HCP365Object.emailPixels.map((x) => x)}
          ${HCP365Object.programmaticPixels.map((x) => x)}
        </div>
      </div>

      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-gray-500">
          <span class="text-base text-white font-bold">NON HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.map((x) => x)}
        </div>
      </div>
  `;

  markup += '</section>';

  sendResponse(markup);
});

我知道这很hacky！但它有效

Answer 1

再看一眼

markup = `
    ...

         <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.map((x) => x)}
        </div>

    ...
`;

问题是HCP365Object.nonHCP365Pixels.map((x) => x)。 map() returns 一个数组，调用 toString() 将列出所有以逗号分隔的项目。

您将需要 join() 这些来构建没有逗号的内容。

此外，由于 .map((x) => x) 只是 returns 数组的副本，您也可以删除它。

markup = `
    ...

        <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.join('')}
        </div>

    ...
`;

你应该在任何使用 .map((x) => x)

的地方使用 .join('')

找到逗号，它来自哪里？ Javascript 对象中的数组

Finding the comma, where is it coming from? Javascript Arrays within Objects

html

javascript

google-chrome-extension