将字符串数组中字符串的每个首字母大写

Question

我基本上采用 http://localhost:3000/north-america/america 之类的 URL，然后在第三个斜杠之后将每个条目放入一个数组中。

我有一个这样的字符串数组 ["america", "north-america"]。

我想将每个条目的每个首字母和每个条目中的每个单词都大写，然后将字符串重新连接在一起，得到这个结果 ["America", "North-America]。

我还想从任何条目中删除破折号并用空格替换它们，从而得到 ["America", "North America] 的最终结果。

到目前为止，我已经设法得到这个 [“America”，“North america”]，但我正在努力将第二个单词大写。

const urls = "http://localhost:3000/north-america/america"

useEffect(() => {
    if (withAvailabilityChecker === true && urlS !== undefined) {
      const url = urlS;
      let parts: string[] = [];

      parts = url.split('/');
      parts.splice(0, 3);
      parts.reverse();
      parts.splice(0, 1);

      const newParts: string[] = [];

      parts.forEach(el => {
        const removeDashes = el.replaceAll('-', ' ');
        const capitaliseEntry = removeDashes.charAt(0).toUpperCase() + removeDashes.slice(1);
        newParts.push(capitaliseEntry);
      });

      if (newParts.length > 2) {
        newParts.length = 2;
      }
      const result = newParts.join(',' + ' ');

      setInputVal(result);
    }
  }, [urlS, locationName]);

Answer 1

我会用空格分割字符串，将每个单词大写，然后将它们连接起来：

const capitaliseEntry = 
    removeDashes.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');

Answer 2

• 首先，在您的代码中

      parts = url.split('/');
      parts.splice(0, 3);
      parts.reverse();
      parts.splice(0, 1);

为什么你有最后一行，又名parts.splice(0, 1)？因为据我了解您的问题，您需要第三个斜杠中的所有条目，而最后一行只是删除了最后一个元素。所以你给出了http://localhost:3000/north-america/america 的例子，通过你的代码，它只会返回["north-america"]，而不是america，因为它被你的代码的最后一行删除了。

• 在获取数组时，您可以映射所有项目以首先删除破折号，然后您可以将其大写。就像下面的例子。

const data = parts.map((element: string) => {
    const dashesRemoved = element.replace(/-/g, " ");
    const dashesRemovedWords = dashesRemoved.split(" ");
    const dashesRemovedCapitalized= dashesRemovedWords.map((word: string) => word[0].toUpperCase() + word.slice(1).toLowerCase());

    return dashesRemovedCapitalized.join(" ");
});

现在所有这些变量都是为了清楚地了解正在发生的事情，如果您愿意，您实际上可以组合所有这些功能，就像这样

const data = parts.map((element: string) => element.replace(/-/g, " ").split(" ").map((word: string) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(" "));

• 我还看到你声明这样的部分

      let parts: string[] = [];

      parts = url.split('/');

但是你甚至没有任何中间代码，至少看起来是这样。那么通过

来初始化你的变量不是更好吗

const parts: string[] = url.split("/");

Answer 3

使用URL 对象隔离pathname 并拆分以返回单独的路径字符串。然后 String#replace() 使用正则表达式和 callback 以同时删除破折号并将首字母大写。

const
  titleCase = (s) => s.replace(/\b([-\w])/g, m => m === '-' ? ' ' : m.toUpperCase()),

  url = "http://localhost:3000/north-america/america",

  data = new URL(url) // URL { href: 'http://localhost:3000/north-america/america', origin: 'http://localhost:3000', protocol: 'http:', username: '', password: '', host: 'localhost:3000', hostname: 'localhost', port: '3000', pathname: '/north-america/america', search: '', searchParams: URLSearchParams { }, hash: ''}
    .pathname         // "/north-america/america"
    .slice(1)         // "north-america/america"
    .split('/')       // ["north-america", "america"]
    .map(titleCase)   // ["North America", "America"]
    .reverse();       // ["America", "North America"]

console.log(data.join(', '));

Answer 4

循序渐进是最好的方法。

• 首先使用/ 字符作为除数分割URL。

let parts: string[] = url.split("/")

• 去掉前三个斜线之前的所有内容。

parts = parts.slice(3)

• 查看部件数组中的每个项目以查找任何- 字符并将它们删除。
• 将每个项目分成单独的单词。
• 每个单词的首字母大写。
• 将单词重新组合到一个项目中。

parts = parts.map(item => {

    // Replacing dashes with spaces
    item = item.replace(/-/g, " ")

    
    item = item.split(" ") // Splitting each part into separate words
               .map(word => word[0].toUpperCase() + word.slice(1)) // Capitalising the first letter of each word
               .join(" ") // Joining back capitalised words

    return item
})

• 最后颠倒数组，以正确的顺序放置部件

parts = parts.reverse()

完整的详细解决方案

let url = "http://localhost:3000/north-america/america"

let parts = url.split("/")

parts = parts.slice(3)

parts = parts.map(item => {
  item = item.replace(/-/g, " ")
  
  item = item
    .split(" ")
    .map(word => word[0].toUpperCase() + word.slice(1))
    .join(" ")

  return item
})


parts = parts.reverse()


console.log(parts) // Outputs: ["America", "North America"]

完整的非详细解决方案

let url = "http://localhost:3000/north-america/america"

let parts = url
  .split("/")
  .slice(3)
  .map(item => {
    return item
      .replace(/-/g, " ")
      .split(" ")
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(" ")
  }).reverse()


console.log(parts) // Outputs: ["America", "North America"]