如何在 JavaScript 中的类名语法中连接字符串?

2024-07-04

我有一个像这样的巨大字符串:

'<i class=""></i>'

我有一个变量叫做icon。我需要放置icon在两个引号之间。虽然感觉很简单,但我一直在努力理解它。有人可以帮忙吗?这里是 JS 新手。


字符串的分隔符是',所以结束',连接icon,并恢复':

const icon = 'myIcon';
const str = '<i class="' + icon + '"></i>';
console.log(str);

但是您可能会发现使用模板文字更具可读性,特别是如果您正在构建 HTML 字符串,或者它是多行,或者您遇到转义字符问题:以反引号开始和结束字符串,并通过将变量放入其中来插入变量${varNameHere}:

const icon = 'myIcon';
const icon2 = 'myIcon2';
const icon3 = 'myIcon3';
const str = `
<i class="${icon}"></i>
<i class="${icon2}"></i>
<i class="${icon3}"></i>
`;
console.log(str);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 JavaScript 中的类名语法中连接字符串? 的相关文章

  • 如何用Python提取网页的某些部分

    目标网页 http www immi gov au skilled general skilled migration estimated allocation times htm http www immi gov au skilled
  • 在javascript中解压缩字符串[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有人知道一个实现 UNZIP 算法的简单 JavaScript 库吗 没有磁盘文件访问 仅压缩和解压缩
  • 使用“expo install”来安装我需要安装的所有内容是否安全?

    我正在做一个世博会项目 我们必须使用expo install添加其他展览库时 例如expo permissions expo av 但我们也可以使用expo install对于非世博图书馆 例如react native root toast
  • 为什么异步 XMLHttpRequest 优于同步请求? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用 Cookie 记住我时的安全性

    我已经在 PHP 中实现了一个登录类 并且想要创建一个记住账号键入功能 这样用户就不必每次访问都登录 我对此进行了一些研究 并准备使用 PHP setcookie 编写它 但后来遇到了这个页面 如何使用 jquery 创建 记住我 并存储
  • Jquery 密码字段的默认值

    我在用这个 Jquery 插件 http mudge github com jquery example 用于使用单击时消失的文本填充输入 它对于密码字段来说并不理想 因为所有内容都显示为点 在开始输入之前使默认文本在密码字段中可见的好方法
  • 如何处理对象字面量?

    我是 Javascript 新手 试图提取存储在对象中的一些文本 该对象被定义为对象字面量并传递给 a 中的函数调用该函数 脚本 和对象 具有以下结构 foo query count 2 created 2009 07 25T08 17 5
  • 替换 observableArray 中的项目

    我正在尝试替换某个项目的所有内容observableArray有新内容 var oldLocation ko utils arrayFirst self locations function item return item id valu
  • 为 Flutter Web 应用程序添加 id 或 name 属性或其他标识方式?

    在编写 Flutter Web 应用程序时 我尝试利用基于 Selenium 的 Web UI Testing 框架 遗憾的是 我无法通过 id 或 name 属性识别代表某个 flutter 小部件的 HTML 元素 HTML 文档中不存
  • 使用 GruntJs 缩小脚本

    我有几个 js 文件 我似乎可以让 GruntJs 正确地连接 缩小它们 如果我单独做每一个 它们就会工作得很好 如果我单独组合然后尝试缩小组合文件 它也不起作用 Here is the error 有想法该怎么解决这个吗 或者也许是什么原
  • requestAnimationFrame 在较弱的机器上运行缓慢。解决办法吗?

    所以 我正在制作一个动画 不是在网站 网页上 它使用Javascript 对于动画 我使用requestAnimationFrame代替setInterval as setInterval不能很好地满足我的需要 然而 尽管requestAn
  • 我应该担心 JavaScript 支持吗?

    我开发了一个支持ajax 的网站 然而 该网站目前无法在没有 JavaScript 的情况下运行 该网站在我测试过的任何浏览器以及 iPhone 诺基亚手机上都运行良好 但是 我还应该担心 javascript 支持吗 我知道有一些技术可以
  • Node-Webkit在不同窗口启动功能

    我的 node webkit 应用程序由一个控制窗口和一个演示窗口组成 控制窗口收集数据并最终通过window open功能 演示文稿窗口现在可以访问global多变的 现在我想通过创建 SVG 元素等来呈现该信息的图形表示 我已经有一个
  • redux fetch body 不能在无 cors 模式下使用

    我有一个调用函数的操作 dispatch Api url my url method POST data data 这里我将数组作为数据传递 import fetch from isomorphic fetch export default
  • 预加载队列中的 mp3 文件,以避免播放队列中下一个文件时出现任何延迟

    我正在编写一个脚本 其中我正在播放多个 mp3 并且每个文件都在队列中 播放下一个 mp3 文件会出现轻微延迟 因为缓冲 加载文件需要时间 我如何缓冲队列中的下一个 mp3 文件 以便所有文件顺利运行而没有任何延迟 getData 1 fu
  • for循环中的appendChild只添加1个孩子

    在 JavaScript 中 我使用 HTML 表格创建一个网格 您在 Photoshop 中看到的网格类型 网格大小是可变的 即可以由用户更改 因此必须计算每个网格方块的大小并将其除以可用像素数以获得精确大小的网格 我已经完成了所有这些
  • angularjs表单重置错误

    我正在尝试使用 angularjs 制作一个带有验证的表单 到目前为止我做得很好 但是 当我提交重置按钮时 除了从验证部分收到的错误消息之外 所有字段都会重置 当我重置表单时 如何删除所有字段和错误消息 这就是我按下重置按钮时的情况 这是我
  • Chart.js 忽略画布高度和宽度

    继Chart js 文档 http www chartjs org docs getting started creating a chart我正在尝试绘制一个小图表
  • 使用 RaphaelJS 确定图像何时加载到 svg 中

    我正在尝试弄清楚如何确定 svg 图像何时加载到浏览器中 我正在使用 Raphael JS 并且我已经尝试过 var image paper image path 0 0 10 10 image node addEventListener
  • 如何获取对象类型

    在我的 Google Apps 脚本应用程序中 我看到以下错误 脚本已完成 但返回值不是受支持的返回类型 如何找出我返回的值的类型 我试过 typeof obj 但我得到的只是它是一个对象 仅当缓存为空并且从电子表格加载数据时才会发生此错误

随机推荐

  • 如何使用文件系统或使用javascript或Jquery进行操作?

    我想使用 Javascript 或 jQuery 进行一些跨浏览器的文件操作 例如 File create File write File read Update Remove delete 可以做以上的事情吗 如果可能的话 我可以从哪里得
  • flat_map是STL容器吗?

    在当前的 C 23 草案中flat map设计 类型flat map reference定义为pair
  • 是否可以创建一个生成亲笔签名的算法?

    An autogram http en wikipedia org wiki Autogram是一个描述其包含的字符的句子 通常枚举字母表中的每个字母 但也可能枚举它包含的标点符号 这是 wiki 页面中给出的示例 这句话使用了两个a 两个
  • 文章列表布局中显示的文章标签

    因此 我一直在添加您添加到 Joomla 文章中的标签 效果很好 但现在我想在 Joomla 中默认的文章列表布局中显示标签 我找到并覆盖了列表布局 并尝试将标签代码从单个文章布局添加到列表布局 下面是我尝试在列表布局中添加的代码 但布局中
  • 使用 DBNull 或 null 插入/更新数据?

    当修改 SQL Server 数据库中的数据时 您可以使用System DBNull Value or null代表一个NULL价值 这两个都可以工作 并将设置适当的值NULL 我的问题是 其中哪一个是首选 为什么 在某些情况下是否应该使用
  • 删除字符串中前后空格:AppleScript

    我正在尝试删除字符串中前面和后面的空格 但我使用的代码不起作用 只有当我选择开头或结尾没有空格的目录路径时 它仍然有效 我究竟做错了什么 on run input parameters set filePath to input set A
  • 以图案图像为背景的 UIScrollView

    这是我面临的问题 我正在制作UI滚动视图这将有一个用于填充背景的图案图像 也就是说 我需要一个背景来随着UIScrollView滚动 一个很好的例子是游戏中心应用程序 在 iPad 上 背景将随着滚动视图平滑滚动 目前我有两种方法来实现这种
  • 仅从 GPS 获取 iPhone 上的位置 - 而不是 wifi 网络

    我正在创建一个使用位置的应用程序 一切都很顺利 除了一件事 当我回到家时 我的 iPhone 连接到我的本地 wifi 网络 而不是使用手机中的 GPS 获取我的位置 而是尝试通过找出我的 wifi 网络连接到的位置来获取位置 如果我关闭
  • 如何在 Angular Material 应用程序的 div 元素中设置背景图像?

    我知道有人问过这个问题 但没有一个解决方案有效 我有以下 html 如果使用注释的 img 元素 我可以显示图像 img src assets utgmap jpg 并注释掉以下 div 元素 但是我想要 div 的背景图像 但它不起作用
  • LNK2001 和 LNK2019 错误 - DirectX 无法解析的外部符号

    我正在阅读 Frank D Luna 所著的 DirectX11 3D 游戏编程简介 一书 当我尝试构建我的项目时 我遇到了这些错误 gt BoxDemo obj error LNK2019 unresolved external symb
  • 是否可以使用 JAX-RS 设置 ETag,而无需求助于 Response 对象?

    In 少数问题之一 附答案 https stackoverflow com questions 2085411 how to use cxf jax rs and http caching我发现关于 JAX RS 和缓存 生成 ETag 用
  • 使用 ctypes 检索本机基类的地址

    我希望能够将证书传递给 Python 的 ssl 库 而不需要临时文件 看来Python的ssl模块不可以这样做 https stackoverflow com questions 12336239 为了解决这个问题 我想检索底层SSL C
  • 导航到 IE 中的数据 URI

    我有这个非常简单的 HTML a href Static a 在 Chrome 或 Firefox 中 它会下载red png正如预期的那样 在 IE 中 它会导航到错误页面 看到它JSFiddle http jsfiddle net di
  • 在配置文件中定义 RabbitMQ 策略

    我想默认为所有队列定义镜像 我目前必须use rabbitmqctl https www rabbitmq com ha html examples一旦节点启动 rabbitmqctl set policy ha all ha mode a
  • 在R中绘制多个不同尺寸和坐标的3D盒子

    最近我偶然发现了 R 中的 rgl Package 它可以用来创建交互式 3D 绘图 现在我想在一个 3d 图中可视化一组盒子 Box B 具有笛卡尔坐标 B coord x y z 对应于左下后角 尺寸 B dim x1 y1 z1 显然
  • Rails 未在 ajax 帖子上重新加载会话

    我在使用 jQuery 的 Rails 和 ajax 中遇到了一个非常奇怪的问题 尽管我不认为它特定于 jQuery 我的 Rails 应用程序使用 cookie 会话存储 并且我有一个非常简单的登录 可以在会话中设置用户 ID 如果会话中
  • 有没有基于 Maven 的 HTML 验证器

    我有一个包含许多 HTML 文件的项目 作为 Maven 构建过程的一部分 我想在这些文件上运行验证器以确保 这些文件在语法上是正确的 例如检查所有开始标签是否都有相应的结束标签 文件符合编码指南 有人可以推荐一个好的验证器来做到这一点吗
  • 以编程方式崩溃后重新启动应用程序 - Android

    有没有办法让我的应用程序在崩溃时自动重新启动 我的应用程序只是一个简单的媒体渲染应用程序 但是它偶尔会崩溃 应该是这样 这是可能吗 谢谢 我的代码看起来像这样 public void Play if mp null mp reset mp
  • 参数 Action 其中 T3 可选

    我有以下代码 public static MyMethod Do something ProtectedMethod param1 param2 Do something protected static void ProtectedMet
  • 如何在 JavaScript 中的类名语法中连接字符串?

    我有一个像这样的巨大字符串 i class i 我有一个变量叫做icon 我需要放置icon在两个引号之间 虽然感觉很简单 但我一直在努力理解它 有人可以帮忙吗 这里是 JS 新手 字符串的分隔符是 所以结束 连接icon 并恢复 cons