JS 和 React 中的字符串操作

Question

我正在对 API 返回的字段进行一些字符串操作，它们有一些独特的特征，因此我想尝试调整它们。

例如：

一个字段来自 JSON 作为：“contract_time”：“full_time”

提供这个，我想尝试操作它，以便获得输出“全职”。

下面是我直接调用的:

          <BadgeComponentFirst>
            <Typography color="red" fontSize="0.6em">
              {job.contract_time}
            </Typography>

我如何将这种字符串操作传递给对象，以便首先删除“_”并大写每个单词的首字母？

谢谢

Answer 1

您想将“_”上的每个单词拆分成一个数组，然后您可以映射数组并将每个单词的首字母大写。然后你想把单词重新组合在一起，用空格分隔。你可以这样做：

let job = {
    contract_time: "full_time"
}

console.log(job.contract_time.split("_").map(word => word[0].toUpperCase() + word.substr(1)).join(' '));

控制台：全职

Answer 2

定义一个方法来转换您的数据：

const capitalize = (str) => str[0].toUpperCase() + str.slice(1);

const verbose = (snake_cased) => {
    snake_cased.split('_').map(capitalize).join(' ');
};

然后您可以在 JSX 代码内的任何地方自由使用这个转换器，没有任何限制。唯一应该记住的是——这个函数将在每次渲染时触发。如果这个计算很复杂——你可能需要一些优化技巧。

const Component = () => (
    <BadgeComponentFirst>
        <Typography color="red" fontSize="0.6em">
            {verbose(job.contract_time)}
        </Typography>
    </BadgeComponentFirst>
);

Answer 3

如果该字段的 API 值是否事先已知，则您需要的方法应该有所不同。

如果预先知道这些值，请使用一个对象将已知值映射到它们的 user-facing 等价物：

const CONTRACT_TIMES = {
    full_time: "Full Time",
    part_time: "Part Time",
};

<Typography color="red" fontSize="0.6em">
    {CONTRACT_TIMES[job.contract_time] || "Unknown"}
</Typography>

如果 API 可以 return 任何值，而你只想显示一个清理过的版本，然后编写一个函数来执行你的操作需要：

function getFriendly(str) {
    return str.split("_").map(getFriendlyWord).join(" ");
}
function getFriendlyWord(word) {
    return word.slice(0, 1).toUpperCase() + word.slice(1);
}

<Typography color="red" fontSize="0.6em">
    {getFriendly(job.contract_time)}
</Typography>

JS 和 React 中的字符串操作

String manipulation in JS and React

javascript

reactjs

string