在JS中，为什么event.target会根据它是在模板文字中还是添加到字符串中而给出不同的结果

在JS中，event.target会根据它是在模板文字中还是添加到字符串中而给出不同的结果。这是因为在模板文字中，event.target会保留其原始类型，而在字符串中，event.target会被转换为字符串类型。

具体来说，在模板文字中，event.target会保留其原始类型，例如如果event.target是一个DOM元素，那么它仍然是一个DOM元素对象。这是因为模板文字是一种特殊的字符串语法，它允许在字符串中插入表达式，并保留表达式的原始类型。

而在字符串中，event.target会被转换为字符串类型。这是因为字符串拼接操作会将所有的操作数转换为字符串类型，包括event.target。所以无论event.target的原始类型是什么，当它被添加到字符串中时，它都会被转换为字符串类型。

需要注意的是，这种行为只适用于字符串拼接操作，对于其他操作，event.target的类型不会发生变化。

在实际应用中，我们可以根据event.target的不同类型来执行不同的操作。例如，如果event.target是一个DOM元素，我们可以通过操作DOM元素来实现特定的功能。如果event.target是一个字符串，我们可以对字符串进行相应的处理。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos

相关·内容

分享30个你必须知道的JS基础知识

在此示例中，我们可以得出结论，event.currentTarget 是事件处理程序附加到的元素。 12. 为什么在 JavaScript 中比较两个相似的对象会返回 false？...在基本类型中，JavaScript 根据它们的值来比较它们，而在对象中，JavaScript 根据它们的引用或变量存储在内存中的地址来比较它们。...这就是为什么第一个 console.log 语句返回 false，而第二个 console.log 语句返回 true。 a 和 c 具有相同的引用地址，而 a 和 b 则不同。 13....模板字符串是一种在 JavaScript 中创建字符串的新方法。我们可以使用反引号 (`) 使字符串成为模板字符串。...`; } 在 ES5 版本中，如果我们需要在字符串中包含表达式或值，我们必须使用 + 运算符。在模板字符串中，我们可以使用 ${expr} 来嵌入一个表达式，这使得它比 ES5 版本更干净。

1993 0

50道JavaScript详解面试题，你需要了解一下

在Line2中，我们使用===运算符来检查两个字符串基元而不是字符串对象，因此我们得到True。 5、控制台输出是什么，为什么？与之前的问题类似，我们比较了两个唯一的对象。...答案是C，当我们需要等待执行直到所有的都被解决时，Promise.all（）会非常有用。 13、控制台输出是什么，为什么？在这种情况下，我们有＆运算符，它与＆＆运算符完全不同。...＆是按位运算符，当我们比较11和3时，它将与1011和0011的二进制相同。结果，只有都为1的位保持为1，返回的输出为0011，它是3的二进制表示形式，因此3记录在控制台上。 14、Object。...20、创建字符串后，我们可以修改它吗？不可以，因为字符串在JavaScript中是不可变的，指向字符串的变量可以分配给另一个字符串。 21、承诺链中的嵌套捕获可以捕获在承诺链中向上抛出的错误吗？...它可以防止更改对象的原型。它防止更改属性的值。它防止更改属性的可写性。 40、event.target与event.currentTarget有何不同？

3.5K4 0

提高 React 项目整洁度的 21 个最佳实践

React 在如何组织结构方面非常开放。这正是为什么我们有责任保持项目的整洁和可维护性。今天，我们将讨论一些改善 React 应用程序健康状况的最佳实践。这些规则被广泛接受。...使用 Fragments 语法始终使用 Fragment 而不是 Div。它可以保持代码整洁，并且也有利于性能，因为在虚拟 DOM 中创建的节点少了一个。...不要在渲染中定义函数不要在渲染中定义函数。尝试将渲染内部的逻辑保持在绝对最低限度。...使用模板字符串 使用模板文字构建大字符串。避免使用字符串连接。它又漂亮又干净。...括号中的 JSX 如果您的组件跨越一行以上，请始终将其括在括号中。

1631 0

75个JavaScript面试题集锦，内含解答，自测 JS 掌握程度

如何知道是否在元素中使用了event.preventDefault()方法？ 11. 为什么此代码obj.someprop.x会引发错误? 12. 什么是event.target？ 13....变量globalVar在图中没有值的原因是该变量的值可以根据调用函数a的位置和时间而改变。但是在上面的示例中，globalVar变量的值为abc。...什么是模板字符串？模板字符串是在 JS 中创建字符串的一种新方法。我们可以通过使用反引号使模板字符串化。...`; } 在 ES5 版本中，如果需要在字符串中添加表达式或值，则需要使用+运算符。在模板字符串s中，我们可以使用${expr}嵌入一个表达式，这使其比 ES5 版本更整洁。 46....在其他语言中，这会抛出编译时错误，但在 JS 中，1被转换成字符串，然后与+运算符连接。我们没有做任何事情，它是由 JS 自动完成。

13K9 4

70个JavaScript面试问题

变量globalVar在图中没有值的原因是该变量的值可以根据调用函数a的位置和时间而改变。但是在上面的示例中，globalVar变量的值为abc。...类(class)是在 JS 中编写构造函数的新方法。它是使用构造函数的语法糖，在底层中使用仍然是原型和基于原型的继承。...什么是模板字符串？模板字符串是在 JS 中创建字符串的一种新方法。我们可以通过使用反引号使模板字符串化。...`; } 在 ES5 版本中，如果需要在字符串中添加表达式或值，则需要使用+运算符。在模板字符串s中，我们可以使用${expr}嵌入一个表达式，这使其比 ES5 版本更整洁。 46....在其他语言中，这会抛出编译时错误，但在 JS 中，1被转换成字符串，然后与+运算符连接。我们没有做任何事情，它是由 JS 自动完成。

1.4K1 0

如何构建你的第一个 Vue.js 组件

在本教程中，我们将构建一个星级评分系统组件。我们将在需要时介绍几个 Vue.js 概念，并介绍为什么要使用它们。...问题在于，这样做需要权衡使用字符串模板，没有 CSS 支持，也没有构建步骤（所以没有预处理器）。然而，我们想要更深入地学习如何构建一个真正的在项目中使用的实际组件。...我们正在创建一个可重用的组件，因此 data 需要成为工厂函数而不是对象文字。这样我们就得到了一个新的对象，而不是一个可以跨几个组件共享的现有对象。...Vue.js 带有一堆指令，可以让您将演示逻辑添加到模板中，而无需将其与纯 JavaScript 代码混合。v-fordirective 遍历任何可迭代的对象（数组，对象文字，映射等）。...在 Vue.js 中，props 从父级传递给子级，而不是反过来传递，所以你不会改变父级的状态。这将违背单向数据流的原则，使事情难以调试。这就是为什么你不应该试图改变子组件内的 prop。

2.5K5 0

看完这几道 JavaScript 面试题，让你与考官对答如流（上）

如何知道是否在元素中使用了event.preventDefault()方法？ 11. 为什么此代码obj.someprop.x会引发错误? 12. 什么是event.target？ 13....在这种情况下，==会执行隐式强制。在比较两个值之前，==需要执行一些规则。假设我们要比较x == y的值。如果x和y的类型相同，则 JS 会换成===操作符进行比较。...具体更多规则可以对参考我之前的文章：我对 JS 中相等和全等操作符转化过程一直很迷惑，直到有了这份算法 15. 为什么在 JS 中比较两个相似的对象时返回 false？...变量globalVar在图中没有值的原因是该变量的值可以根据调用函数a的位置和时间而改变。但是在上面的示例中，globalVar变量的值为abc。...因此，当我们在循环后在该数组中调用其中一个函数时，它会打印5，因为我们得到i的当前值为5，我们可以访问它，因为它是全局变量。因为闭包在创建变量时会保留该变量的引用而不是其值。

2K1 0

AngularDart4.0 指南- 用户输入顶

\$EVENT Dart文件中的非原始字符串需要$前面的\。如果模板位于HTML文件中，请使用$ event而不是\ $event。...例如，鼠标事件包含与输入框编辑事件不同的信息。所有标准的DOM Event对象都有一个target属性，它是引发事件的元素的引用。...以下示例使用模板引用变量在简单模板中实现按键回送。...代码使用box变量来获取输入元素的值，并在标签之间进行插值显示。模板是完全独立的。它不绑定到组件，组件什么也不做。在输入框中输入内容，然后观看每个按键显示更新。 ?...保持模板语句简单。（blur）事件绑定到两个语句。第一个语句调用addHero（）。第二个语句newHero.value =''在新的英雄添加到列表后清除输入框。

3.4K0 0

《微信小程序七日谈》- 第一天：人生若只如初见

/assets/icons.sprites.png"); } 如果在wxss中编写以上代码并不会报错，但是也不会有任何理想的效果。官方给出的答复是： ?...wxml wxml的语法与vue.js有点相似，支持数据绑定以及部分模板逻辑。...笔者目前在wxml开发中总结以下几点注意事项： 1> 使用wxml模板语法时只能使用部分js逻辑判断或者也可以理解为只能使用以下几种逻辑：引用变量；二元操作符；三元操作符。...3> 可变数组数据渲染务必使用wx:key 渲染列表数据时，如果列表中的数据是动态的（比如点击之后修改列表中某个元素的值），那么在渲染UI时务必将渲染的模板加上wx:key。...wx:key的取值还可以是保留字*this，官方给出的定义如下：保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

7208 0

Vue.js 数据绑定语法详解

Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。 dom html 不同于 字符串 1、Vue.js 数据绑定语法有哪4个知识点？...但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。而且在构建单页应用时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。...这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。...带引号的参数视为字符串，而不带引号的参数按表达式计算。这里，字符串 'arg1' 将传给过滤器作为第二个参数，表达式 arg2 的值在计算出来之后作为第三个参数。...但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。而且在构建单页应用时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。

3.4K2 0

Javascript 的新功能-Part 1

，因为Number('123_456') 会给出 NAN，而 parseInt('123_456') 则给出 123。...所以我们只能依赖安全范围内的数字整型的值。 BigInts 应运而生，可以通过将 n 后缀添加到整数文字中来创建 BigInts 。...静态与动态导入这个很疯狂，在我们深入研究它之前，先看看静态导入是什么。静态导入仅接受字符串文字作为模块说明符，并通过运行前的“链接”过程将绑定引入本地作用域。...这是因为不同的 JS 引擎（在不同的浏览器上）采用了不同的路径来实现排序，而且某些 JavaScript 引擎对短数组使用稳定的排序，而对长数组使用不稳定的排序。...这就导致了因为排序稳定性的行为不一致而引发了很多混乱。这就是为什么在开发环境中与排序相关的内容似乎都可以工作，但是在生产环境中，由于和测试排序所使用的数组大小不同，我们开始看到其他内容的原因。

8352 0

Vue全家桶之Vue基础(1)

简单理解是分而治之，就是将不同功能的代码放到不同的模块中，在以特定的方式让它们建立起关联。如下图所示： ? 4.1.5 事件绑定 Vue 如何处理事件? 语法格式如下： <!...尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。...，请看下面视频讲解：加法计算器小案例.mp4 为什么在 HTML 中监听事件？...因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。...另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： ? 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。

1.9K2 0

微信小程序个人心得「建议收藏」

它是用来导航栏标题颜色的,它的输入类型是字符串(String),但是现在官网给出的文档目前仅支持(black和white)这两种颜色. navigationBarTitleText 这个属性是显示导航栏标题内容的...以上就是根据官方给出的文档,我学习之后对app.json配置一些心得,下面我们在看一下app.js 这个文件. ---- 可以看到app.js这个文件的后缀是js,没错,微信小程序的开发框架在逻辑层用的语言就是....onShow是监听小程序的显示,在小程序启动时候,或者当你从后台进入到前台的时候就会触发这个函数.而onHide函数是监听小程序的隐藏的,当你从前台切换到后台的时候,会触发onHide.有了这些一个小程序的实例基本上算是完成了...注意:app()只能定义在app.js中,而且不能注册多个....当然在视图层还可以进行运算（三元运算，算术运算），逻辑判断，字符串运算，而且还可以在大括号里面进行组合（数组，对象（虽然可以随意组合，但是如果后面的变量名和前面的变量名相同的话，那么后面的会覆盖前面的）

1.8K2 0

记一场vue面试

根据一个通用 Vue 实例所包含的选项进行分类逐一判断合并，如 props、data、 methods、watch、computed、生命周期等，将合并结果存储在新定义的 options 对象里。...# 后面的部分，因此只能设置与当前 URL 同文档的 URL；pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中...hash模式和history模式都有各自的优势和缺陷，还是要根据实际情况选择性的使用。v-model 是如何实现的，语法糖实际是什么？...对于最终的结果，两种方式是相同的不同点：computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；method 调用总会执行该函数。...，主要用来做虚拟DOM的渲染优化（优化器）第三步是使用 element ASTs 生成 render 函数代码字符串（代码生成器）Vue为什么没有类似于React中shouldComponentUpdate

4643 0

Vue2 (一)：指令与过滤器

在 MVVM 概念中： Model 表示当前页面渲染时所依赖的数据源。 View 表示当前页面所渲染的 DOM 结构。 ViewModel 表示 vue 的实例，它是 MVVM 的核心。...当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中...四、指令 1.概念指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构 2.类型 vue 中的指令按照不同的用途可以分为如下 6 大类： ① 内容渲染指令...“” 中的表达式都按照 js表达式编译，因此字符串类型数据要加上单引号 2.3 事件绑定指令（1）v-on: 简写是 @ （2）通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明...true 或 false 被 v-if 控制的元素给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏 <

1.1K5 1

怎样编写更好的 JavaScript 代码

文字模板（字符串模板） 字符串是最常见的编程结构之一。这就是为什么它如此令人尴尬，以至于本地声明字符串在许多语言中仍然得不到很好的支持的原因。在很长一段时间里，JS 都处于“糟糕的字符串”系列中。...但是文字模板的添加使 JS 成为它自己的一个类别。...本地文字模板，方便地解决了编写字符串，添加动态内容和编写桥接多行的两个最大问题： const name = 'Ryland'; const helloString = `Hello ${name}`;...如果你尝试执行多次迭代，则处理器可能会根据不准确的值进入错误地分支，从而使结果无效。如果这是 C 代码，我们将会进行不同的讨论，因为使用情况不同，编译器可以使用循环实现相当多的技巧。...尽管如此，它是唯一真正的免费选项，所以除非你做一些企业级的网络自动化，否则还是 Selenium 最适合这个工作。

1.3K3 0

React进阶

为什么要用 JSX？不用会有什么后果？ JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？ JSX 是 JS 的一种语法扩展，他和模板语言很接近，但充分具备 JS 的能力。...以 useState 为例，Hooks 的底层实现为链表，在组件初始化时，调用的 Hooks 会形成一个单向链表，之后的更新渲染时，底层 api 会根据 useState 的调用顺序来确定应该返回哪个对应的...来操作 DOM，降低研发成本但因为 jQuery 本质上还是一个工具，并不能从根本上解决 DOM 操作量过大情况下前端侧的压力，所以进一步的，出现了早期模板引擎，让开发者不用关心 DOM 操作，而只需关系数据和数据的变化...而早期模板引擎却有一个致命的问题：不能做太复杂的事情，性能表现不尽人意，数据变化时，单纯是全部销毁之前的 DOM 节点然后生成新的，而最后出现的虚拟 DOM 可以完美解决这个问题（JS 算法的计算量和...的工具可以使用：React.memo，通过它包装的函数组件会记住前一次的渲染结果，当入参不变时，渲染结果会直接复用前一次的结果 useMemo 与 React.memo 类似： React.memo

1.4K3 0

手把手带你10分钟手撸一个简易的Markdown编辑器

同步滚动的效果实现了，但能很明显得看到，当我手动滚动完以后停止了任何操作，但是两个区域仍然在不停的滚动，这是为什么呢？...，这样就可以在 handleScroll 方法里区分此次滚动是被动触发的还是主动触发的了 import React, { useState, useRef, useEffect } from 'react...但事实就是编辑区滚动到最底部了，而展示区还没有，显然不是我们要的效果换一种思路，我们在计算滚动比例时，应计算的是当前的 scrollTop 占 scrollTop最大值的比例，这样就能实现同步滚动了，...将选中文字的两侧加上** 否。在光标所在处添加文字**加粗文字** 动图效果演示： ?...在我已经发布的markdown-editor-reactjs (opens new window)中，已经完成了其它工具的实现，想要看代码的可以去源码里看七、补充为了保证包的体积足够小，我将第三方依赖库

1.9K1 0

JavaScript—网络编程(3)-Object、String、Array对象和prototype属性

html> 演示结果： toLocaleString 方法说明：就是根据你电脑的设置时区，来匹配输出时间的格式，一般在字符串用的少。...注意 toLocaleString 只用来显示结果给用户；不要在脚本中用来做基本计算，因为返回的结果是随机器不同而不同的。...用这种方法创建的 String 对象（指以标准字符串形式）与用 new 运算符创建的 String 对象处理上不同。所有字符串文字共享公用的全局字符串对象。...每个用 new String 声明的 String 对象有其自己的一组成员。这是对 String 对象和字符串文字的处理不同的唯一情况。...是一个String 对象或字符串文字，对于stringObj 中每个匹配 rgExp 中的位置都用该对象所包含的文字加以替换。

3551 0

JavaScript---网络编程(3)-Object、String、Array对象和prototype属性

toLocaleString 方法说明：就是根据你电脑的设置时区，来匹配输出时间的格式，一般在字符串用的少。...注意 toLocaleString 只用来显示结果给用户；不要在脚本中用来做基本计算，因为返回的结果是随机器不同而不同的。...用这种方法创建的 String 对象（指以标准字符串形式）与用 new 运算符创建的 String 对象处理上不同。所有字符串文字共享公用的全局字符串对象。...每个用 new String 声明的 String 对象有其自己的一组成员。这是对 String 对象和字符串文字的处理不同的唯一情况。...是一个String 对象或字符串文字，对于stringObj 中每个匹配 rgExp 中的位置都用该对象所包含的文字加以替换。

3802 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云