如何从URL路径名中提取目录（如es/或pt/）以动态更新自定义Web组件中的标题？

嘿，这问题我熟！咱们一步步来搞定：

首先，得从URL路径里把语言前缀（比如es/、pt/）提取出来。咱们可以用window.location.pathname拿到当前页面的路径，再做简单的字符串处理就行。

第一步：提取语言前缀 #

举个例子，如果URL路径是/es/carousel-page，window.location.pathname会返回"/es/carousel-page"。咱们可以用split('/')把它拆成数组，然后取第一个非空的元素——也就是语言代码。这里要注意处理根路径（比如/）的情况，这时候就用默认语言（比如英文）。

第二步：在Web组件里动态替换标题 #

接下来把这个逻辑整合到你的Carousel组件里。咱们可以先定义一个语言和对应标题的映射表，这样后续加新语言也方便维护，然后在connectedCallback里完成提取语言、匹配标题、更新DOM的操作。

修改后的组件代码大概是这样的：

class Carousel extends HTMLElement {
  constructor() {
    super();
    // 定义不同语言对应的标题文本
    this.headingMap = {
      es: 'Marcas confiables',
      pt: 'Marcas confiáveis',
      en: 'Trusted Brands' // 默认英文标题
    };
  }

  // 从路径中提取语言代码的工具方法
  getLanguageFromPath() {
    const pathParts = window.location.pathname.split('/');
    // 取第一个非空的部分，比如路径是/es/xxx就取es，根路径就返回en
    const lang = pathParts.find(part => part.trim() !== '');
    // 如果提取到的语言在映射表里存在就用它，否则用默认的en
    return this.headingMap.hasOwnProperty(lang) ? lang : 'en';
  }

  connectedCallback() {
    const currentLang = this.getLanguageFromPath();
    const currentHeading = this.headingMap[currentLang];

    this.innerHTML = `
      <div class="Carousel-Sec">
        <p class="trusted-brands-heading">
          ${currentHeading}
        </p>
        <!-- Image template -->
      </div>
    `;
  }
}

额外的边界情况处理 #

如果你的URL路径可能有更多层级（比如/es/eu/carousel），但你只需要最开头的那个语言前缀，那上面的find方法还是能拿到第一个非空的es，完全没问题。要是你担心有其他非语言的前缀，也可以加个白名单，比如只允许es、pt、en这些值，这样更稳妥：

getLanguageFromPath() {
  const allowedLangs = Object.keys(this.headingMap);
  const pathParts = window.location.pathname.split('/');
  const lang = pathParts.find(part => allowedLangs.includes(part));
  return lang || 'en';
}

这样一来，不管路径是/es/、/pt/some-page还是根路径，组件都能自动匹配到对应的标题啦！

备注：内容来源于stack exchange，提问作者Muralikumar J