React技巧之字符串插值
原文链接:https://bobbyhadz.com/blog/react-string-interpolation
正文从这开始~
总览
在React中,使用模板字面量进行字符串插值,比如说,<div className={
text-white ${myClass}}>
。模板字面量以反引号为界限,允许我们使用美元符号和大括号${expression}
语法来嵌入变量和表达式。
import './App.css';
export default function App() {
const myClass = 'bg-salmon';
const name = 'James Doe';
const num = 30;
return (
<div>
<div className={`text-white ${myClass}`}>Some content here</div>
<br />
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
Some content here
</div>
<h2>Hello {name}</h2>
<h2
style={{
padding: `${num + num}px`,
backgroundColor: 'lime',
}}
>
30 + 30 = {num + num}
</h2>
</div>
);
}
下面是示例中的css声明。
.bg-salmon {
background-color: salmon;
}
.text-white {
color: white;
}
模板字面量
我们可以使用模板字面量在字符串中插入变量。需要注意的是,字符串是用反引号````包裹起来的,而不是用单引号。
美元符号和大括号语法允许我们使用占位符来求值。
<div className={`text-white ${myClass}`}>Some content here</div>
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
Some content here
</div>
我们用大括号把模板字面量包裹起来,标志着一个必须被求值的表达式的开始。
开头和结尾的大括号之间的只是JavaScript代码,所以我们在模板字面量上使用的任何变量或表达式都会被求值。
当你想在JSX代码中渲染变量或表达式时,你必须将代码包裹在大括号内。
<h2>Hello {name}</h2>
JSX之外
您也可以在JSX代码之外使用模板字面量。
const num = 50;
const result = `${num + 50} percent`;
console.log(result); // 👉️ 100 percent
多行字符串
默认情况下,模板字面量将这些部分连接成一个字符串。你也可以在多行字符串中使用模板字面量来插入变量。
const color1 = 'red';
const color2 = 'blue';
const poem = `roses are ${color1}
violets are ${color2}`;
console.log(poem);
// 👉️ roses are red
// 👉️ violets are blue
这是非常有用的,因为与连接字符串不同,我们不必在每一行都添加换行符。
调用函数
你甚至可以在模板字面量里面调用函数。
import './App.css';
export default function App() {
const subtract = (a, b) => {
return a - b;
};
const myClass = 'bg-salmon';
const num = 30;
return (
<div>
<div
style={{fontSize: `${subtract(60, 20)}px`}}
className={`padding-${subtract(100, 80)} text-white ${myClass}`}
>
Some content here
</div>
</div>
);
}
三元运算符
这里有一个示例,是在模板字面量里面使用三元运算符。
const color1 = 'blue';
const color2 = 'red';
const result = `${color1.length > color2.length ? color1 : color2}`;
console.log(result); // 👉️ blue
三元运算符与if/else
语句基本类似。问号前的部分会被求值,如果它返回一个真值,运算符会返回冒号前的值,否则会返回冒号后的值。
import './App.css';
export default function App() {
return (
<div>
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
Some content here
</div>
</div>
);
}
示例中的三元运算符检查字符串hi
的length
属性是否等于2,如果等于2,则返回字符串bg-salmon
,否则返回空字符串。
逻辑运算
你也可以在模板字面量中使用逻辑或(||)运算以及逻辑与(&&)运算。
const num1 = 0;
const num2 = 100;
const result = `${num1 || num2}`;
console.log(result); // 👉️ 100
如果逻辑或运算的左侧是一个真值,那么便返回该值,否则返回右侧的值。
下面是在模板字面量中使用逻辑与运算的示例。
const bool = true;
const str = 'hello';
const result = `${bool && str}`;
console.log(result); // 👉️ hello
如果逻辑与运算的左侧是一个假值,那么便返回该值,否则返回右侧的值。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通