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

Question

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

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

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

我还想从任何条目中删除破折号并用 space 替换它们，从而得到 ["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

我将字符串拆分为 space，将每个单词大写并重新加入：

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 的例子，根据你的代码，它只是 return ["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 object to isolate the pathname and split to return individual path strings. Then String#replace() with a regex and 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 = 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"]

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

Capitalise every first letter of a string in an array of strings

javascript

string

capitalization

typescript

reactjs

完整的详细解决方案

完整的非详细解决方案