如何在 Javascript 中的 Where() 方法中放置变量？

Question

很抱歉这个问题，因为我是这个领域的新手。 因此，我目前正在为我的网站使用 Firebase Firestore，从 Firebase 获取文档的常用方法可以完美运行。 但是，当我创建一个搜索功能时，我必须通过where('field name in Firebase','equations like "=", ">",">=", etc.', 'parameter') firebase where('field name in Firebase','equations like "=", ">",">=", etc.', 'parameter')过滤来自 Firebase 的文档. 我的问题是我想从我称之为source的搜索栏中输入一个值。 使用toLowerCase()转换source的值后，我想将变量source分配给where()函数内的参数。 但是，它效果不佳，因为在我看过的一些教程中，他们使用字面上的字符串数据类型并将其放在where()参数中。 谁能帮我解决这个问题？ 顺便说一下，我尝试在参数中输入一些string ，并且效果很好。 我会将数据保留在 Firebase 中，以防您想弄乱它。 谢谢。

 target1.addEventListener('search', search); function search(){ source = target1.value; source = source.toLowerCase(); db.collection('Product').where('name','>=', 'source').where('name','<=', 'source' + '\').onSnapshot(snapshot =>{ let changes = snapshot.docChanges(); changes.forEach(change =>{ if (change.type == 'added'){ insertDoc(change.doc); } else if (change.type == 'removed'){ let box = docTarget.querySelector('[data-id=' + change.doc.id +']'); docTarget.removeChild(box); } }) })

 *{ margin:0; padding:0; font-family: 'Product Sans'; box-sizing: border-box; font-style: normal; src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2), format('woff2'); max-width: 360px; height: auto; } body{ background-color: white; background-size: cover; max-height: auto; display: flex; align-items: center; justify-content: center; } .big-container{ /* overflow: hidden; */ width: 360px; height: auto; position: absolute; margin-left: 0px; top: 0px; } .arc{ position: relative; background-color:#E67E22; top: 0px; text-align: center; position: absolute; top: 0px; width: 360px; height: 150px;; border-radius: 0px 0px 25px 25px; transform: translate(0,-5px); z-index: 1; } .title{ font-size: 32px; color: white; text-align: center; position: relative; top: 27px; } .cancel{ position: relative; top:-6px; left: 300px; z-index: -10; } .sorter{ position: relative; top:-6px; left:15px; } input{ position: relative; width: 312px; height: 35px; left: -24px; top: 47px; border:2px solid white; border-radius: 10px; background: #E67E22; outline: none; padding-top: 1px; padding-right: 15px; color: black; font-size: 16px; padding-left: 15px; transition: 0.5s; z-index: 10; } ::placeholder{ color: white; } #wrapper{ position: relative; min-width: 360px; min-height: 100px; height: auto; left: 0px; top: 145px; background: white; border-radius: 12.5px; padding: 12px; padding-top: 22px; display: grid; grid-template-columns: repeat(2,157px); grid-auto-rows: 95px; grid-column-gap: 23px; grid-row-gap: 16px; } .box{ width: 157px; min-height: 95px; max-height: auto; background: #FFFFFF; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); border-radius: 12.5px; padding-bottom: 5px; } .title-box{ position: relative; top: 17px; text-align: center; font-family: Product Sans; font-style: normal; font-weight: bold; font-size: 20px; line-height: 24px; text-align: center; letter-spacing: 0.02em; color: #E67E22; transition: 0.5s; } .tc-1{ position: relative; top: 26px; left: 33px; font-family: Product Sans Light; font-style: normal; font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: #000000; transition: 0.5s; } .tc-2{ position: relative; top: 26px; left: 14px; font-family: Product Sans; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; letter-spacing: 0.00em; color: #000000; transition: 0.5s; } .tc-3{ position: relative; top: -6px; left: 110px; font-family: Product Sans Light; font-style: normal; font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: #000000; transition: 0.5s; } .tc-4{ position: relative; top: -6px; left: 88px; font-family: Product Sans; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; letter-spacing: 0.00em; color: #000000; transition: 0.5s; } .box:hover{ background: #E67E22; transition: ease-in-out 0.5s; color: white; } .box:hover h4, .box:hover p{ color: white; transition: 0.5s; } h2{ width: 157px; min-height: 95px; max-height: auto; overflow: hidden; padding: 2px; visibility: visible; position: absolute; top: 22px; } .closer{ visibility: visible; position: relative; top: -100px; left: 135px; z-index: 100; }

 <html> <head> <title>SDE Stock | Cari</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script> </head> <body> <div class="big-container"> <span class="navbar"> <div class="arc"> <p class="title">Cari produk</p> <img src="Group 2.svg" alt="" class="cancel"> <img src="menu 1.svg" alt="" class="sorter"> <input type="search" class="searcher"> </div> </span> <div id="wrapper"> <!-- <div class="box"></div> <div class="box"></div> <div class="box"></div> <div id="last-element" class="important"></div> --> </div> </div> <script> var firebaseConfig = { apiKey: "AIzaSyARW1T5mnayv7XVsHnfP_uc0jO-ck11ykw", authDomain: "sde-sale-stock.firebaseapp.com", databaseURL: "https://sde-sale-stock.firebaseio.com", projectId: "sde-sale-stock", storageBucket: "sde-sale-stock.appspot.com", messagingSenderId: "247739189879", appId: "1:247739189879:web:0f809640941c5d3e341472", measurementId: "G-VS6QCRD18K" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); const db = firebase.firestore(); </script> <script src="script.js"></script> </body> </html>

Answer 1

由于source是一个变量，那么您需要执行以下操作：

source = target1.value;
source = source.toLowerCase();
db.collection('Product').where('name','>=', source).where('name','<=', source + '\uf8ff').onSnapshot(snapshot =>{