原文链接:https://bobbyhadz.com/blog/react-string-interpolation

作者:Borislav Hadzhiev

正文从这开始~

总览

在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>
);
}

示例中的三元运算符检查字符串hilength属性是否等于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

如果逻辑与运算的左侧是一个假值,那么便返回该值,否则返回右侧的值。

React技巧之字符串插值的更多相关文章

  1. angularjs字符串插值($interpolate)

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  2. Swift字符串插值

    字符串插值是一种全新的构建字符串的方式,可以在其中包含常量.变量.字面量和表达式.您插入的字符串字面量的每一项都被包裹在以反斜线为前缀的圆括号中: let multiplier = let messa ...

  3. Scala字符串插值

    Scala提供了三种字符串插值方式:s,f和raw.1. s字符串插值器简单的说就是解析字符串变量. val name = "Tom" println(s"His nam ...

  4. [转] Scala 2.10.0 新特性之字符串插值

    [From]  https://unmi.cc/scala-2-10-0-feature-string-interpolation/ Scala 2.10.0 新特性之字符串插值 2013-01-20 ...

  5. CoffeeScript里的字符串插值

    拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...

  6. Scala字符串插值 - StringContext

    翻译自:STRING INTERPOLATION 简介 自2.10.0版本开始,Scala提供了一种新的机制来根据数据生成字符串:字符串插值.字符串插值允许使用者将变量引用直接插入处理过的字面字符中. ...

  7. angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

  8. 【技巧:字符串同构】Avendesora

    判断字符串“同构”的技巧 题目大意 给定A,B两个序列,要求B在A中出现的次数以及位置.定义字符变换:把所有相同的字符变为另一种字符:两个字符串相等:当且仅当一个字符串可以在若干次字符变换之后变为另一 ...

  9. qmake奇淫技巧之字符串宏定义

    阅读本文大概需要3.3分钟 我们平时在软件开发过程中需要定义一些宏,以便在代码中调用,这样每次不需要修改代码,只需要修改外部编译命令就可以得到想要的参数,非常方便 比如我们想在软件介绍中显示软件版本, ...

随机推荐

  1. 靶场vulnhub-CH4INRULZ_v1.0.1通关

    1.CH4INRULZ_v1.0.1靶场通关 ch4inrulz是vulnhub下的基于Linux的一个靶场,作为练习之用 目的:通过各种手段,获取到靶机内的flag的内容 2.环境搭建: 攻击机 K ...

  2. MySql创建分区

    一.Mysql分区类型 1.RANGE 分区:基于属于一个给定连续区间的列值,把多行分配给分区. 2.HASH分区:基于用户定义的表达式的返回值来进行选择的分区,该表达式使用将要插入到表中的这些行的列 ...

  3. Jx.Cms开发笔记(二)-系统登录

    界面 此界面完全抄了BootstrapAdmin css隔离 由于登录页面的css与其他页面没有什么关系,所以为了防止其他界面的css被污染,我们需要使用css隔离. css隔离需要在_Host.cs ...

  4. Python生成短uuid的方法

    python的uuid都是32位的,比较长,处理起来效率比较低, 本算法利用62个可打印字符,通过随机生成32位UUID,由于UUID都为十六进制,所以将UUID分成8组,每4个为一组,然后通过模62 ...

  5. HttpRunner的PB序列化工具类解决方案(python3)

    背景 年初的时候团队内落地了HttpRunner3框架,简单介绍下:HttpRunner 是一款由python开发的面向 HTTP(S) 协议的开源通用测试框架,用例脚本为 YAML/JSON 格式, ...

  6. 论文解读(GCC)《Graph Contrastive Clustering》

    论文信息 论文标题:Graph Contrastive Clustering论文作者:Huasong Zhong, Jianlong Wu, Chong Chen, Jianqiang Huang, ...

  7. MySQL进阶之常用函数

    我的小站 有时候,除了简单的数据查询,我们还有一些高级的函数. MySQL 包含了大量并且丰富的函数,这套 MySQL 函数大全只收集了几十个常用的,剩下的比较罕见的函数我们就不再整理了,读者可以到M ...

  8. PostgreSQL 锁 之 关系级锁

    1.关于锁的基本信息 PostgreSQL 有各种各样的技术来锁定某些东西(或者至少是这样称呼的).因此,我将首先用最笼统的术语解释为什么需要锁,可用的锁类型以及它们之间的区别.然后我们将弄清楚 Po ...

  9. vscode设置vue文件高亮显示

    打开VS Code,左上角 文件->首选项->设置->文本编辑器->文件,点击右侧的"在settings.json中编辑",进入settings.json文 ...

  10. .NET性能优化-你应该为集合类型设置初始大小

    前言 计划开一个新的系列,来讲一讲在工作中经常用到的性能优化手段.思路和如何发现性能瓶颈,后续有时间的话应该会整理一系列的博文出来. 今天要谈的一个性能优化的Tips是一个老生常谈的点,但是也是很多人 ...