Podciąg JavaScript

Michael Zippo

Metoda JavaScript substring() pobiera zakres znaków między dwoma pozycjami indeksu. Możesz użyć podciągu (), aby pobrać znaki aż do końca ciągu, pomijając pozycję indeksu końcowego.

Podciąg to mniejsza część większego ciągu. Programiści używają podkanałów, aby wyodrębnić określone dane, których potrzebują w ciągu.

Na przykład możesz podzielić dzień, miesiąc i rok daty urodzenia użytkownika na trzy zmienne. Pozwala to na przechowywanie każdej wartości osobno zamiast przechowywania daty urodzenia jako zmiennej.

Lub możesz podzielić ciąg, aby uzyskać dwie pierwsze litery nazwy użytkownika. W tym przewodniku dowiemy się, jak używać podciągu w JavaScript.

Jak używać metody podciągu JavaScript

Wyciągi procesu JavaScript () część ciągu między dwiema wartościami indeksu. Bez drugiego indeksu wartości, podciąg () pobiera wszystkie znaki po numerze określonego indeksu

Metoda podciąg () przyjmuje dwa argumenty:.

Pozycja, w której podciąg powinien zacząć się ; oraz
Pozycję, w której podciąg powinien Zatrzymać

Spójrzmy na składnię tej metody:

Podciąg () jest dołączany na końcu ciągu. Tylko parametr startowy jest potrzebny do działania metody substring()

Przykłady podrzędnych ciągów w języku JavaScript
Pobierz znaki na końcu ciągu

Mamy ciąg zawierający imię kota. Chcemy usunąć pierwsze dwa znaki z imienia kota i zobaczyć, co zostało. W tym celu możemy użyć metody substring():

W pierwszym wierszu kodu definiujemy zmienną o nazwie catName. Przypisujemy tej zmiennej wartość Pickles. Następnie definiujemy zmienną JavaScript , która pobiera podciąg zmiennej catName.
Użyliśmy 2 jako parametr w polu metoda podciągu (). Oznacza to, że metoda zwraca każdą literę po drugim indeksie w ciągu. Oto dane wyjściowe dla naszego przykładu:

kles
Teraz możemy zobaczyć wszystkie litery pojawiające się po pozycji indeksu 2.
Pobierz znaki z zakresu
h3>
Jeśli próbujemy pobrać część ciągu, który zaczyna się jednym znakiem, a kończy drugim, powinniśmy przekazać dwie wartości do > substring () Pierwszy argument to początek, a drugi to koniec znak.
Potrzebujemy pierwszych trzech znaków imienia naszego kota:
Wyjście dla przykładu jest takie jak powyżej:
Pic
Nasz ciąg zawiera wszystkie znaki z zakresu indeksu 0 i 3. Pamiętaj , ciągi są indeksowane do zera. Oznacza to, że jeśli chcesz pobrać pierwszy znak ciągu musisz zacząć swój podciąg od 0.
Pobierz ostatni znak

Pobieramy ostatni znak naszego łańcucha. W metodzie substring nie możemy używać ujemnych liczb indeksowych. Zamiast tego możemy użyć metody length, aby znaleźć długość łańcucha. Następnie możemy użyć tej liczby do pobrania ostatniego znaku w naszym ciągu:

Wynik:
s
ten przykład, catName.length pobiera długość naszego łańcucha - liczbę jego znaków -. i zwraca ostatni znak w łańcuchu
Wniosek
Metoda zwraca podciąg znaków JavaScript () między dwiema wartościami indeksu ‚Ęã‚Ęãw listingu. Jeśli nie określisz końcowej wartości indeksu, substring () zwróci wszystkie znaki po danej pozycji indeksu.
Deweloperzy używają metody substring (), aby podzielić ciąg na wiele części. Jest to przydatne, jeśli programista potrzebuje tylko jednej informacji z ciągu

Aby dowiedzieć się więcej o kodowaniu w JavaScript, przeczytaj nasz przewodnik po najlepsze samouczki dla początkujących JavaScript .
</ iframe> </div> </div> <div class="article__right"> <div class="hub_ad"> <div id="ezoic-pub-ad-placeholder-106"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9381065361874746" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9381065361874746" data-ad-slot="8755532771" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="shop-aside shop-aside--mt"> <h2 class="shop-aside__title">Shop</h2> <div class="shop__items shop__items--column"> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/learn-programming-in-r-courses/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Learn programming in R: courses</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-python-online-courses-for-2022/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best Python online courses for 2022</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-fortnite/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Fortnite</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-excel/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Excel</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-solidworks/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Solidworks</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-roblox/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Roblox</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-computer-for-crypto-mining/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best computer for crypto mining</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-sims-4/"></a><img class="shop__item-img" src="http://python.engineering/wp-content/uploads/2022/04/pye-best-laptop-for-sims-4.jpg"> <p class="shop__item-name">Best laptop for Sims 4</p><span class="shop__item-price">$</span> </div> </div> </div> <div class="hub_ad"> <div id="ezoic-pub-ad-placeholder-106" style="position:sticky; position:-webkit-sticky; top:0; margin-top:10px; z-index: 1000"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9381065361874746" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9381065361874746" data-ad-slot="8755532771" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="l-questions l-questions--mt"> <p class="l-questions__title">Latest questions</p> <div class="l-questions__list"> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/8134602-psycopg2-insert-multiple-rows-with-one-query/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">psycopg2: insert multiple rows with one query</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/3930188-how-to-convert-nonetype-to-int-or-string/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">How to convert Nonetype to int or string?</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/33945261-how-to-specify-multiple-return-types-using-type-hints/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">How to specify multiple return types using type-hints</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/51922480-javascript-error-ipython-is-not-defined-in-jupyterlab/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">Javascript Error: IPython is not defined in JupyterLab</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> </div> <div class="l-questions__more-link"><a href="/cat/wiki/so/">All questions</a></div> </div> <div class="hub_ad"> <div id="ezoic-pub-ad-placeholder-106" style="position:sticky; position:-webkit-sticky; top:0; margin-top:10px; z-index: 1000"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9381065361874746" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9381065361874746" data-ad-slot="8755532771" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div>  <div class="news"> <div class="container"> <h2 class="news__title h2">News</h2> <div class="news__items">  <a class="news__item" href="https://python.engineering/microsoft-paid-13-7m-to-335-white-hat-hackers-for-discovered-vulnerabilities/" style="background-color: #243978;"> <span class="news__item-overlay"> <span class="news__item-cat">15/08/2022</span> <span class="news__item-title">Microsoft paid $13.7M to 335 white hat hackers for discovered vulnerabilities</span> </span> </a>  <a class="news__item" href="https://python.engineering/new-gpus-from-intel-xe-and-arc-will-not-support-directx-9/" style="background-color: #243978;"> <span class="news__item-overlay"> <span class="news__item-cat">15/08/2022</span> <span class="news__item-title">New GPUs from Intel Xe and Arc will not support DirectX 9</span> </span> </a>  <a class="news__item" href="https://python.engineering/meta-will-start-testing-automatic-end-to-end-encryption-in-messenger-in-the-coming-weeks/" style="background-color: #243978;"> <span class="news__item-overlay"> <span class="news__item-cat">15/08/2022</span> <span class="news__item-title">Meta will start testing automatic end-to-end encryption in Messenger in the coming weeks</span> </span> </a> </div> </div> </div>  <br>  <div class="wiki"> <div class="container"> <h2 class="wiki__title h2">Wiki</h2> <div class="wiki-grid"> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-opencv-cv2-puttext-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">Python OpenCV | cv2.putText () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/numpy-arctan2-python/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">numpy.arctan2 () in Python</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-os-path-realpath-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">Python | os.path.realpath () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-opencv-cv2-circle-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">around</span></a> </div> <p class="l-questions__item-title">Python OpenCV | cv2.circle () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-opencv-cv2-cvtcolor-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">cvtcolor</span></a> </div> <p class="l-questions__item-title">Python OpenCV cv2.cvtColor () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-move-element-to-end-of-the-list/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">Python functions</span></a> </div> <p class="l-questions__item-title">Python - Move item to the end of the list</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/time-perf_counter-function-in-python/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">Counters</span></a> </div> <p class="l-questions__item-title">time.perf_counter () function in Python</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-check-if-one-list-is-subset-of-other/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__dict__</span></a> </div> <p class="l-questions__item-title">Check if one list is a subset of another in Python</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-os-path-join-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">Python os.path.join () method</p> </div> </div> </div> </div>   <footer class="footer"> <div class="container"> <div class="footer__row"> <div class="footer__left"><img class="footer__logo" src="/wp-content/themes/nimani/img/footer-logo.svg" alt="Python Engineering"> <p class="footer__copyright">© 2017—2022 <br> Python Engineering Hub</p> <p class="footer__desc"> <a href="/cat/wiki/" class="footer__nav-link">EN</a> | <a href="/cat/es_sp/" class="footer__nav-link">ES</a> | <a href="/cat/de_de/" class="footer__nav-link">DE</a> | <a href="/cat/fr_fr/" class="footer__nav-link">FR</a> | <a href="/cat/it_it/" class="footer__nav-link">IT</a> | <a href="/cat/ru_ru/" class="footer__nav-link">RU</a> | <a href="/cat/tr_tr/" class="footer__nav-link">TR</a> | <a href="/cat/pl_pl/" class="footer__nav-link">PL</a> | <a href="/cat/pt_pt/" class="footer__nav-link">PT</a> | <a href="/cat/ja_jp/" class="footer__nav-link">JP</a> | <a href="/cat/ko_kr/" class="footer__nav-link">KR</a> | <a href="/cat/zh_cn/" class="footer__nav-link">CN</a> | <a href="/cat/hi_in/" class="footer__nav-link">HI</a> | <a href="/cat/nl_nl/" class="footer__nav-link">NL</a> </p> <br> <p class="footer__desc"> Python.Engineering is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com </p> </div> <div class="footer__nav-col"> <p class="footer__nav-title">Python</p> <ul class="footer__nav-list"> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/loops/">Loops</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/counters/">Counters</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/numpy/">NumPy</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/nlp/">NLP</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/regex/">Regular Expressions</a></li> </ul> </div> <div class="footer__nav-col"> <p class="footer__nav-title">Wiki</p> <ul class="footer__nav-list"> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/news/">Tech news</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/wiki/">Python Wiki</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/wiki/so/">StackOverflow</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/php/">PHP</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/javascript/">JavaScript</a></li> </ul> </div> <div class="footer__nav-col"> <p class="footer__nav-title">Books</p> <ul class="footer__nav-list"> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/books/">All books</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/computations/">Computations</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/development/">Development</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/cryptography/">Cryptography</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/beginners/">For dummies</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/bigdata/">Big Data</a></li> </ul> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="/wp-content/themes/nimani/js/libs.js"></script> <script src="/wp-content/themes/nimani/js/index.js"></script> <script src="/wp-content/themes/nimani/js/vendor/lazysizes.min.js" async></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q022WLXW4X" async></script> <script async src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=desert&lang=python"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { let arrayCode = document.querySelectorAll('pre'); arrayCode.forEach(element => { element.classList.add("prettyprint"); }); }); </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q022WLXW4X'); </script>    </body> </html>