Files
liquidjs/tutorials/truthy-and-falsy.html
T

307 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>Truthy and Falsy | LiquidJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
<link rel="manifest" href="/manifest.json">
<!-- Canonical links -->
<link rel="canonical" href="https://liquidjs.com/tutorials/truthy-and-falsy.html">
<!-- Alternative links -->
<link rel="alternative" hreflang="en" href="https://liquidjs.com/tutorials/truthy-and-falsy">
<link rel="alternative" hreflang="zh-cn" href="https://liquidjs.com/zh-cn/tutorials/truthy-and-falsy">
<!-- Icon -->
<link rel="apple-touch-icon" sizes="57x57" href="../icon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="../icon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="../icon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="../icon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="../icon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="../icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="../icon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="../icon/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="../icon/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="../icon/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="../icon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="../icon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="../icon/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#2f83cd">
<meta name="msapplication-TileImage" content="../icon/mstile-144x144.png">
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
<header id="header" class="wrapper">
<div id="header-inner" class="inner">
<h1 id="logo-wrap">
<a href="../index.html" id="logo">LiquidJS</a>
</h1>
<nav id="main-nav">
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
<div id="search-input-wrap">
<i id="search-input-icon" class="icon-search"></i>
<input type="search" id="search-input" placeholder="Search...">
</div>
</nav>
<div id="lang-select-wrap" class="main-nav-link">
<label><i class="icon-network"></i>English</label>
<select id="lang-select" data-canonical="tutorials/truthy-and-falsy.html">
<option value="en" selected>English</option>
<option value="zh-cn">简体中文</option>
</select>
</div>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
</a>
</div>
</header>
<div id="content-wrap">
<div id="content" class="wrapper">
<div id="content-inner">
<aside id="sidebar" role="navigation">
<div class="inner">
<strong class="sidebar-title">Getting Started</strong><a href="intro-to-liquid.html" class="sidebar-link">Intro to Liquid</a><a href="setup.html" class="sidebar-link">Setup</a><a href="options.html" class="sidebar-link">Options</a><a href="render-file.html" class="sidebar-link">Render Files</a><a href="partials-and-layouts.html" class="sidebar-link">Includes and Layouts</a><a href="use-in-expressjs.html" class="sidebar-link">Use in Express.js</a><strong class="sidebar-title">Advanced</strong><a href="caching.html" class="sidebar-link">Caching</a><a href="register-filters-tags.html" class="sidebar-link">Register Filters/Tags</a><a href="whitespace-control.html" class="sidebar-link">Whitespace Control</a><a href="plugins.html" class="sidebar-link">Plugins</a><a href="operators.html" class="sidebar-link">Operators</a><a href="truthy-and-falsy.html" class="sidebar-link current">Truthy and Falsy</a><strong class="sidebar-title">Miscellaneous</strong><a href="migrate-to-9.html" class="sidebar-link">Migrate to LiquidJS 9</a><a href="changelog.html" class="sidebar-link">Changelog</a><a href="differences.html" class="sidebar-link">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="sidebar-link">Contribution Guidelines</a>
</div>
</aside>
<article class="article-container" itemscope itemtype="http://schema.org/Article">
<div class="article-inner">
<div class="article">
<div class="inner">
<header class="article-header">
<h1 class="article-title" itemprop="name">Truthy and Falsy</h1>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/truthy-and-falsy.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<p>Though <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.npmjs.com/package/liquidjs">Liquid</a> is platform-independent, therere <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs#differences-and-limitations">certain differences</a> with <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shopify.github.io/liquid">the Ruby version</a>, one of which is the <code>truthy</code> value.</p>
<h2 id="The-Truth-Table" class="article-heading"><a href="#The-Truth-Table" class="headerlink" title="The Truth Table"></a>The Truth Table<a class="article-anchor" href="#The-Truth-Table" aria-hidden="true"></a></h2><p>According to <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shopify.github.io/liquid/basics/truthy-and-falsy/">Shopify document</a> everything other than <code>false</code> and <code>nil</code> is truthy. But in JavaScript we have a totally different type system, we have types like <code>undefined</code> and we dont differentiate <code>integer</code> and <code>float</code>, thus things are slightly different:</p>
<table>
<thead>
<tr>
<th>value</th>
<th>truthy</th>
<th>falsy</th>
</tr>
</thead>
<tbody><tr>
<td><code>true</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>false</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>null</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>undefined</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>string</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>empty string</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>0</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>integer</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>float</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>array</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>empty array</code></td>
<td>✔️</td>
<td></td>
</tr>
</tbody></table>
<h2 id="Use-JavaScript-Truthy" class="article-heading"><a href="#Use-JavaScript-Truthy" class="headerlink" title="Use JavaScript Truthy"></a>Use JavaScript Truthy<a class="article-anchor" href="#Use-JavaScript-Truthy" aria-hidden="true"></a></h2><p>Note that liquidjs use Shopifys truthiness by default. But it can be toggled to used standard JavaScript truthiness by setting the <strong>jsTruthy</strong> option to <code>true</code>.</p>
<table>
<thead>
<tr>
<th>value</th>
<th>truthy</th>
<th>falsy</th>
</tr>
</thead>
<tbody><tr>
<td><code>true</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>false</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>null</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>undefined</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>string</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>empty string</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>0</code></td>
<td></td>
<td>✔️</td>
</tr>
<tr>
<td><code>integer</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>float</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>array</code></td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><code>empty array</code></td>
<td>✔️</td>
<td></td>
</tr>
</tbody></table>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2022-01-12T13:26:14.534Z" itemprop="dateModified">Last updated: 2022-01-12</time>
<a href="operators.html" class="article-footer-prev" title="Operators"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="migrate-to-9.html" class="article-footer-next" title="Migrate to LiquidJS 9"><span>Next</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
</div>
<aside id="article-toc" role="navigation">
<div id="article-toc-inner">
<div id="article-toc-inner-list">
<strong class="sidebar-title">Contents</strong>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#The-Truth-Table"><span class="toc-text">The Truth Table</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Use-JavaScript-Truthy"><span class="toc-text">Use JavaScript Truthy</span></a></li></ol>
</div>
<a href="#" id="article-toc-top">Back to Top</a>
</div>
</aside>
</div>
</article>
</div>
</div>
</div>
<footer id="footer" class="wrapper">
<div class="inner">
<div id="footer-copyright">
&copy; 2022 <a href="https://github.com/harttle/liquidjs/graphs/contributors" rel="external nofollow noreferrer" target="_blank">Harttle</a><br>
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>.
</div>
<div id="footer-links">
<a href="https://twitter.com/harttleharttle" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-twitter"></i></a>
<a href="https://www.patreon.com/harttle" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-patreon"></i></a>
<a href="https://opencollective.com/liquidjs" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-opencollective"></i></a>
<a href="https://github.com/harttle/liquidjs" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-github"></i></a>
</div>
</div>
</footer>
</div>
<div id="mobile-nav-dimmer"></div>
<nav id="mobile-nav">
<div id="mobile-nav-inner">
<ul id="mobile-nav-list">
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
<li class="mobile-nav-item">
<a href="https://github.com/harttle/liquidjs" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
</li>
</ul>
<div class="mobile-sidebar-list">
<strong class="mobile-nav-title">Getting Started</strong><a href="intro-to-liquid.html" class="mobile-nav-link">Intro to Liquid</a><a href="setup.html" class="mobile-nav-link">Setup</a><a href="options.html" class="mobile-nav-link">Options</a><a href="render-file.html" class="mobile-nav-link">Render Files</a><a href="partials-and-layouts.html" class="mobile-nav-link">Includes and Layouts</a><a href="use-in-expressjs.html" class="mobile-nav-link">Use in Express.js</a><strong class="mobile-nav-title">Advanced</strong><a href="caching.html" class="mobile-nav-link">Caching</a><a href="register-filters-tags.html" class="mobile-nav-link">Register Filters/Tags</a><a href="whitespace-control.html" class="mobile-nav-link">Whitespace Control</a><a href="plugins.html" class="mobile-nav-link">Plugins</a><a href="operators.html" class="mobile-nav-link">Operators</a><a href="truthy-and-falsy.html" class="mobile-nav-link current">Truthy and Falsy</a><strong class="mobile-nav-title">Miscellaneous</strong><a href="migrate-to-9.html" class="mobile-nav-link">Migrate to LiquidJS 9</a><a href="changelog.html" class="mobile-nav-link">Changelog</a><a href="differences.html" class="mobile-nav-link">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="mobile-nav-link">Contribution Guidelines</a>
</div>
</div>
<div id="mobile-lang-select-wrap">
<span id="mobile-lang-select-label"><i class="icon-network"></i><span>English</span></span>
<select id="mobile-lang-select" data-canonical="tutorials/truthy-and-falsy.html">
<option value="en" selected>English</option>
<option value="zh-cn">简体中文</option>
</select>
</div>
</nav>
<script src="../js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
document.getElementById('search-input-wrap').classList.add('on');
docsearch({
apiKey: '01f36cc168657a26a385308b9e721bc6',
indexName: 'liquidjs',
inputSelector: '#search-input',
debug: false
});
</script>
</body>
</html>